Question

我有一个非常简单的形式，我正在构建使用PHP，AJAX和jQuery。该表单由从数据库填充的现有人员的选择框组成。下面是常见的联系信息（地址，城市，电话等）。加载页面时，表单为空，除了包含人员的选择框。

基本思想是，当用户选择一个人时，它应该将该人的联系信息填充到表单中。该表单显示为模式窗口，因此我不希望页面刷新，因此我向服务器发送传递唯一ID的AJAX请求，然后服务器使用JSON编码的PHP数组进行响应该人的联系信息。我正在获取这些信息并填写表格。

除了应该进入选择框的数据（例如State）之外，所有这些都按照我的需要工作。我成功检索了正确的状态值，并验证了该值与select中的选项匹配，但我无法在选择框中更改所选值。

以下是我的代码的重点：

<!-- 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调用没有重新触发该函数。我无法弄清楚如何使它发挥作用。

Answer 1

您应该将此代码$("AttState").val(selState);置于AJAX请求的成功回调中，如下所示：

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

在AJAX响应后重新选择选项值

1 个答案: