按编辑按钮时，无法设置第二个下拉菜单的值。第一个轻松更改。但是即使我使用相同的方法来更改第一个下拉菜单的值，第二个似乎也没有改变
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);
});
答案 0 :(得分：0)
尝试以下
$(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>