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

Question

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

HTML：

<div style=" width: 550px; padding: 40px; margin-top: 5%; margin-bottom: 5%; border: 1px solid black " class="container center-div">

        <form>


            <div class="form-group">
                <label for="PersonName">Person Id</label>
                <input type="text" class="form-control" id="PersonId" name="PersonId" placeholder="Id" disabled>
            </div>

            <div class="form-group">
                <label for="PersonName">Person Name</label>
                <input type="text" class="form-control" id="PersonName" name="PersonName" placeholder="Name">
            </div>

            <div class="form-group">
                <label for="PersonName">Person Age</label>
                <input type="text" class="form-control" id="PersonAge" name="PersonAge" placeholder="Age">
            </div>


            <input type="button" value="Save" id="snddet" name="snddet" style="position: absolute; margin-top: 45px; margin-left: 190px; padding-left: 40px; padding-right: 40px;" class="btn btn-primary">

            <label for="PersonCountry">Country:</label>
            <select style="margin-top:10px" class="mdb-select md-form" id="PersonCountry" name="PersonCountry" >
                <option value="" disabled selected>Please Select a Country</option>
                @foreach (var item in (List<String>)ViewBag.list)
                {
                    <option value='@item'>@item</option>
                }
            </select>

            <label for="PersonCity">City:</label>
            <select class="mdb-select md-form" id="PersonCity" name="PersonCity" >
                <option value="" disabled selected>Please Select a City</option>


            </select>


</form>

        <button id="upd" style="margin-top: 10px; margin-left: 50px" class="btn btn-primary" disabled>Save Changes</button>  


        <table id="mytable" class="table table-reflow" border='1' style="margin-top:50px; text-align:center "></table>
</div>

脚本：

    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);
    });

Answer 1

试试下面的

    
$(document).ready(function () {
$('#PersonCountry').trigger('change');//instead of giving change function inside another function,use this to trigger change event
});

 
 //city dropdown loading
 $('#PersonCountry').change(function () {
    var a = document.getElementById("PersonCountry").value;
     $.ajax({
           type: "POST",
           url: "/Person/getCountry",
           dataType: "json",
           data: { PersonCountry: a },
           contentType: "application/json; charset=utf-8",
           success: function (data) {
             $('#PersonCity').empty();
             if (data.length !== 0) {
                var s = '<option value="-1"disabled selected>Please Select a City</option>';
                $.each(data, function (k, item) {
                   s += '<option value="' + data[i] + '">' + data[i] + '</option>'; 
                });
                $("#PersonCity").append(s);   
             }     
          },
          failure: function (errMsg) {
             alert(errMsg);
           }
         });

        });

 <label for="PersonCountry">Country:</label>
            <select style="margin-top:10px" class="mdb-select md-form" id="PersonCountry" name="PersonCountry" >
                <option value="" disabled selected>Please Select a Country</option>
                @foreach (var item in (List<String>)ViewBag.list)
                {
                    <option value='@item'>@item</option>
                }
            </select>

            <label for="PersonCity">City:</label>
            <select class="mdb-select md-form" id="PersonCity" name="PersonCity" >
              
            </select>