选择downdown 1时如何更改选择下拉值？

Question

我有一个名为 rec 的数据库，我在其中存储以下记录：

Id  Name Surname

1   John smith

2   Roger jhonson

我希望在 2 个下拉菜单中显示所有记录。假设如果我选择 Roger，那么 surname 的值应该更改为 Jhonson，如果它已经在 Smith 上。

如果我选择 John，那么姓氏的值应该返回给 smith，但如果我想要我应该能够将 John 的姓氏更改为 Jhonson，这不应该改变Name的值，所选值应该保持为 John Jhonson。

有人可以告诉我如何做到这一点吗？

非常感谢您提前提供的帮助和时间。

Answer 1

HTML<select name="cname" class="float-right ralign" id="cname">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="" disabled selected>--select name--</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">John</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">Roger</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<select name="surname" class="float-right ralign" id="surname">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="" disabled selected>--select surname--</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">smith</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">jhonson</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>使用 jQueryOnchange事件&nbsp; &nbsp;<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript">$( document ).ready(function(){&nbsp; &nbsp; $("#cname").change(function(){&nbsp; &nbsp; &nbsp; &nbsp; var cname = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; $('#surname option').eq(cname).prop('selected', true);&nbsp; &nbsp; });});$( document ).ready(function(){&nbsp; $("#cname").change(function(){&nbsp; &nbsp; var cname = $(this).val();&nbsp; &nbsp; $('#surname option').eq(cname).prop('selected', true);&nbsp; });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><select name="cname" class="float-right ralign" id="cname">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="" disabled selected>--select name--</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">John</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">Roger</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp;<select name="surname" class="float-right ralign" id="surname">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="" disabled selected>--select surname--</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">smith</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">jhonson</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>