AJAX響應后重新選擇選項值

Question

我有一個使用PHP，AJAX和jQuery構建的非常簡單的表單。 該表單包含一個從數據庫中填充的現有人員的選擇框。 下方是常用的聯系信息（地址，城市，電話等）。加載頁面時，除了包含人員的選擇框之外，該表單為空。

基本思想是，當用戶選擇一個人時，應將該人的聯系信息填充到表單中。 該表單顯示為模式窗口，所以我不希望頁面刷新，因此我向服務器發送了AJAX請求，並傳遞了唯一ID，服務器依次以該人的JSON編碼的PHP數組作為響應聯系信息。 我正在獲取這些信息並填寫表格。

除應放入選擇框（例如，州）的數據外，所有這些工作均按我的需要進行。 我已成功檢索正確的狀態值，並已驗證該值與select中的選項匹配，但是我無法獲取它來更改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()函數內部$(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);
});