Javascript 如何更改第二个下拉列表的值

我无法在按下编辑按钮时设置第二个下拉列表的值。第一个很容易改变。但是第二个似乎没有改变，即使我用同样的方法来改变第一个下拉列表的值，但是由于某种原因第二个没有改变

HTML:

个人Id
人名
人龄
国家：
请选择一个国家/地区
@foreach（列表）ViewBag.List中的变量项）
{
@项目
}
城市：
请选择一个城市
保存更改

脚本：

    function loadctr()
    {
        $('#PersonCountry').change(function () {
            var a = document.getElementById("PersonCountry").value;
            $.ajax({
                type: "get",
                url: "/Person/getCountry",
                dataType: "json",
                data: { PersonCountry: a },
                contentType: "application/json; charset=utf-8",

                success: function (data) {
                    var len = data.length;
                    var s = '<option value="-1"disabled selected>Please Select a City</option>';
                    for (var i = 0; i < data.length; i++) {
                        s += '<option value="' + data[i] + '">' + data[i] + '</option>';
                    }
                    $("#PersonCity").html(s);                       
                },

                failure: function (errMsg) {
                    alert(errMsg);
                }
            });

        });
    }

    $(document).ready(function () {
        loadrec();
        loadctr();


    });



    function loadrec() {

        $(function () {
            $.ajax({
                type: "get",
                url: "/Person/getTable",
                dataType: "json",
                contentType: "application/json; charset=utf-8",

                success: function (data) {
                    debugger
                    var i = 1;
                    var j = 1;
                    $('#mytable').append('<tr><th style="text-align:center" >  Id</th><th style="text-align:center">  Name</th><th style="text-align:center">  Age</th><th style="text-align:center">  Country</th><th style="text-align:center">  City</th><th style="text-align:center">  Options</th></tr>');
                    $(data).each(
                               function () {                                      
                                   $('#mytable').append('<tr><td>' + this.Id + '</td><td id="name-' + this.name + '">' + this.name + '</td><td id="age-' + this.age + '">' + this.age + '</td><td>' + this.country + '</td><td>' + this.city + '</td><td> <button class="delbtn" id= "' + this.Id + '"> Delete </button> <button class="editbtn" id= "' + this.Id + '"> Edit </button> </td></tr>')
                                   if (i == data.length) {
                                       $(".delbtn").click(function () {
                                           var del = $(this).attr('id');
                                           $.ajax({
                                               type: "get",
                                               url: "/Person/delRow",
                                               dataType: "json",
                                               contentType: "application/json; charset=utf-8",
                                               data: { del: del },
                                               success: function (data) {
                                                   alert(data);
                                                   $("#mytable").empty();
                                                   loadrec();
                                                   $('#PersonId').val("");
                                                   $('#PersonName').val("");
                                                   $('#PersonAge').val("");
                                                   $('#PersonCountry').val("");
                                                   $('#PersonCity').val("");



                                               },
                                               failure: function (errMsg) {
                                                   alert("failure")
                                               }
                                           })
                                       });
                                       $(".editbtn").click(function () {
                                           var edit = $(this).attr('id');
                                           $('#PersonId').val($(this).parent().siblings()[0].innerText);
                                           $('#PersonName').val($(this).parent().siblings()[1].innerText);
                                           $('#PersonAge').val($(this).parent().siblings()[2].innerText);                                               
                                           $('#PersonCountry').val($(this).parent().siblings()[3].innerText);
                                           $('#PersonCountry').change();
                                           $('#PersonCity').val($(this).parent().siblings()[4].innerText);
                                           jQuery("#upd").prop('disabled', false);
                                           jQuery("#snddet").prop('disabled', true);


                                       });
                                   }
                                   i = i + 1;
                               })
                }
            })
        });


    }


    $('#snddet').click(function () {
        var name = document.getElementById("PersonName").value;
        var age = document.getElementById("PersonAge").value;
        var country = document.getElementById("PersonCountry").value;
        var city = document.getElementById("PersonCity").value;
        $.ajax({
            type: "get",
            url: "/Person/SendDetails",
            dataType: "json",
            data: { name: name, age: age, country: country, city: city },
            contentType: "application/json; charset=utf-8",

            success: function (data) {
                alert(data);
                $("#mytable").empty();
                loadrec();
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
        $('#PersonId').val("");
        $('#PersonName').val("");
        $('#PersonAge').val("");
        $('#PersonCountry').val("");
        $('#PersonCity').val("");
    });

    $('#upd').click(function () {
        var Id = document.getElementById("PersonId").value;
        var name = document.getElementById("PersonName").value;
        var age = document.getElementById("PersonAge").value;
        var country = document.getElementById("PersonCountry").value;
        var city = document.getElementById("PersonCity").value;

        $.ajax({
            type: "get",
            url: "/Person/editData",
            dataType: "json",
            data: { Id: Id, name: name, age: age, country: country, city: city },
            contentType: "application/json; charset=utf-8",

            success: function (data) {
                alert(data);
                $("#mytable").empty();
                loadrec();
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
        jQuery("#upd").prop('disabled', true);
        $('#PersonId').val("");
        $('#PersonName').val("");
        $('#PersonAge').val("");
        $('#PersonCountry').val("");
        $('#PersonCity').val("");
        jQuery("#snddet").prop('disabled', false);
    });

函数loadctr（）
{
$（'#PersonCountry'）。更改（函数（）{
var a=document.getElementById（“PersonCountry”）.value；
$.ajax({
键入：“获取”，
url:“/Person/getCountry”，
数据类型：“json”，
数据：{PersonCountry:a}，
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
var len=data.length；
var s='请选择一个城市'；
对于（变量i=0；i    function loadctr()
    {
        $('#PersonCountry').change(function () {
            var a = document.getElementById("PersonCountry").value;
            $.ajax({
                type: "get",
                url: "/Person/getCountry",
                dataType: "json",
                data: { PersonCountry: a },
                contentType: "application/json; charset=utf-8",

                success: function (data) {
                    var len = data.length;
                    var s = '<option value="-1"disabled selected>Please Select a City</option>';
                    for (var i = 0; i < data.length; i++) {
                        s += '<option value="' + data[i] + '">' + data[i] + '</option>';
                    }
                    $("#PersonCity").html(s);                       
                },

                failure: function (errMsg) {
                    alert(errMsg);
                }
            });

        });
    }

    $(document).ready(function () {
        loadrec();
        loadctr();


    });



    function loadrec() {

        $(function () {
            $.ajax({
                type: "get",
                url: "/Person/getTable",
                dataType: "json",
                contentType: "application/json; charset=utf-8",

                success: function (data) {
                    debugger
                    var i = 1;
                    var j = 1;
                    $('#mytable').append('<tr><th style="text-align:center" >  Id</th><th style="text-align:center">  Name</th><th style="text-align:center">  Age</th><th style="text-align:center">  Country</th><th style="text-align:center">  City</th><th style="text-align:center">  Options</th></tr>');
                    $(data).each(
                               function () {                                      
                                   $('#mytable').append('<tr><td>' + this.Id + '</td><td id="name-' + this.name + '">' + this.name + '</td><td id="age-' + this.age + '">' + this.age + '</td><td>' + this.country + '</td><td>' + this.city + '</td><td> <button class="delbtn" id= "' + this.Id + '"> Delete </button> <button class="editbtn" id= "' + this.Id + '"> Edit </button> </td></tr>')
                                   if (i == data.length) {
                                       $(".delbtn").click(function () {
                                           var del = $(this).attr('id');
                                           $.ajax({
                                               type: "get",
                                               url: "/Person/delRow",
                                               dataType: "json",
                                               contentType: "application/json; charset=utf-8",
                                               data: { del: del },
                                               success: function (data) {
                                                   alert(data);
                                                   $("#mytable").empty();
                                                   loadrec();
                                                   $('#PersonId').val("");
                                                   $('#PersonName').val("");
                                                   $('#PersonAge').val("");
                                                   $('#PersonCountry').val("");
                                                   $('#PersonCity').val("");



                                               },
                                               failure: function (errMsg) {
                                                   alert("failure")
                                               }
                                           })
                                       });
                                       $(".editbtn").click(function () {
                                           var edit = $(this).attr('id');
                                           $('#PersonId').val($(this).parent().siblings()[0].innerText);
                                           $('#PersonName').val($(this).parent().siblings()[1].innerText);
                                           $('#PersonAge').val($(this).parent().siblings()[2].innerText);                                               
                                           $('#PersonCountry').val($(this).parent().siblings()[3].innerText);
                                           $('#PersonCountry').change();
                                           $('#PersonCity').val($(this).parent().siblings()[4].innerText);
                                           jQuery("#upd").prop('disabled', false);
                                           jQuery("#snddet").prop('disabled', true);


                                       });
                                   }
                                   i = i + 1;
                               })
                }
            })
        });


    }


    $('#snddet').click(function () {
        var name = document.getElementById("PersonName").value;
        var age = document.getElementById("PersonAge").value;
        var country = document.getElementById("PersonCountry").value;
        var city = document.getElementById("PersonCity").value;
        $.ajax({
            type: "get",
            url: "/Person/SendDetails",
            dataType: "json",
            data: { name: name, age: age, country: country, city: city },
            contentType: "application/json; charset=utf-8",

            success: function (data) {
                alert(data);
                $("#mytable").empty();
                loadrec();
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
        $('#PersonId').val("");
        $('#PersonName').val("");
        $('#PersonAge').val("");
        $('#PersonCountry').val("");
        $('#PersonCity').val("");
    });

    $('#upd').click(function () {
        var Id = document.getElementById("PersonId").value;
        var name = document.getElementById("PersonName").value;
        var age = document.getElementById("PersonAge").value;
        var country = document.getElementById("PersonCountry").value;
        var city = document.getElementById("PersonCity").value;

        $.ajax({
            type: "get",
            url: "/Person/editData",
            dataType: "json",
            data: { Id: Id, name: name, age: age, country: country, city: city },
            contentType: "application/json; charset=utf-8",

            success: function (data) {
                alert(data);
                $("#mytable").empty();
                loadrec();
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
        jQuery("#upd").prop('disabled', true);
        $('#PersonId').val("");
        $('#PersonName').val("");
        $('#PersonAge').val("");
        $('#PersonCountry').val("");
        $('#PersonCity').val("");
        jQuery("#snddet").prop('disabled', false);
    });