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

Question

我有一个名为 rec 的数据库，我在其中存储以下记录：Id  Name Surname1   John smith2   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">

            <option value="" disabled selected>--select name--</option>

            <option value="1">John</option>

            <option value="2">Roger</option>

          </select>

             <select name="surname" class="float-right ralign" id="surname">

            <option value="" disabled selected>--select surname--</option>

            <option value="1">smith</option>

            <option value="2">jhonson</option>

          </select>

使用 jQueryOnchange事件

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

$( document ).ready(function(){

    $("#cname").change(function(){

        var cname = $(this).val();

        $('#surname option').eq(cname).prop('selected', true);

    });

});

$( document ).ready(function(){

  $("#cname").change(function(){

    var cname = $(this).val();

    $('#surname option').eq(cname).prop('selected', true);

  });

});

<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">

            <option value="" disabled selected>--select name--</option>

            <option value="1">John</option>

            <option value="2">Roger</option>

          </select>

       <select name="surname" class="float-right ralign" id="surname">

            <option value="" disabled selected>--select surname--</option>

            <option value="1">smith</option>

            <option value="2">jhonson</option>

          </select>