我有一个非常简单的表单，我正在使用PHP，AJAX和jQuery构建。 表单由从数据库填充的现有人员的选择框组成。 下面是常见的联系信息（地址、城市、电话等） 加载页面时，除了包含人员的选择框外，表单为空。
基本思想是，当用户选择某个人时，它应该将该人的联系信息填充到表单中。 表单显示为模式窗口，因此我不希望页面刷新，因此我向服务器发送传递唯一 ID 的 AJAX 请求，反过来，服务器使用带有该人员联系信息的 JSON 编码 PHP 数组进行响应。 我正在获取这些信息并填充表单。
所有这些都按照我的需要工作，除了应该进入选择框的数据（例如状态）。 我已成功检索正确的状态值，并已验证该值与选择中的选项匹配，但我无法让它更改选择框中的选定值。
以下是我的代码的亮点：
<!-- abridged generated HTML -->
<select name="PersonID" id="PersonID">
<option value="1">Mike</option>
<option value="2">Jim</option>
<!-- etc... -->
</select>
<input type="text" id="City" />
<select name="AttState" class="selectpicker" id="AttState">
<option>State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<!--And so on... -->
</select>
<!-- etc... -->
然后是Javascript...
$(document).ready(function() {
// This will pre-select when the form is initially loaded
var selState = "TX";
$("#PersonID").on('change', function(e) {
personId = $("#PersonID").val();
$.getJSON('GetPersonInfo.php?q=' + personId, function(data) {
$.each(data, function(key, val) {
$("#City").val(val.City);
selState = val(val.State);
// Plus all of the others...
});
});
$("AttState").val(selState);
});
表单最初加载时，州被预先选择为德克萨斯州;但是，当选择人员并且 selState 更改（由警报验证）时，它不会设置为正确的值。 我读过一些帖子，这些帖子似乎围绕着确保 JavaScript 代码存在于 $(document).ready(function() 函数中，所以我怀疑 AJAX 调用不会重新触发函数。 我不知道如何让它工作。
您应该将这段代码放在 AJAX 请求的成功回调$("AttState").val(selState);中，如下所示：
$.getJSON('GetPersonInfo.php?q=' + personId, function(data) {
$.each(data, function(key, val) {
$("#City").val(val.City);
selState = val(val.State);
// Plus all of the others...
});
// its depend on your code whether inside .each() or not
$("#AttState").val(selState);
});