加载选项框后，jQuery在选项框中设置选定值

我想根据隐藏字段预设selectbox的值。在表单中检测到错误后，我需要使用此选项，以避免用户必须自己再次设置值。 我通过设置隐藏字段服务器端的值来实现这一点。 我遇到的问题似乎是，在我尝试设置所选值时，选择框尚未完成。 有人知道如何解决这个问题（可能是以一种非常不同的方式？）

$（函数（）{
//如果选择了具有州的国家/地区，此功能将加载具有州的州选择框
$（“选择国家”）。更改（功能（）{
$.getJSON（“/ajax/experience/getstates.php？idCountry=“+$（“选择#国家”）.val（），函数（j）{
var选项=“”；
$。每个（j，函数（键，值）{
选项+=''+值+''；
});
$（“选择#状态”）.html（选项）；
});
});
});
$（文档）.ready（函数（）{
//预设“就绪”页上的“状态选择”框
$（'select#countries'）.change（）；
//设置状态选择框的选定值
var foo=$（'#statepreset'）.val（）；
$（“选择#状态选项[value=“+foo+”]”）attr（'selected'，'selected'）；
});

您可以将预选代码添加到getJson的回调中

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script type="text/javascript" charset="utf-8">
$(function(){
    // this functions loads the state select box with states if a country with states is selected
$("select#countries").change(function(){
  $.getJSON("/ajax/exhibition/getstates.php?idCountry="+$("select#countries").val(), function(j){
        var options = '';
        $.each(j, function(key, value){
            options += '<option value="' + key + '">' + value + '</option>';
        });
        $("select#state").html(options);
        var foo = $('#statepreset').val();
        $("select#state option[value="+foo+"]").attr('selected', 'selected');
    });
});
});

$（函数（）{
//如果选择了具有州的国家/地区，此功能将加载具有州的州选择框
$（“选择国家”）。更改（功能（）{
$.getJSON（“/ajax/experience/getstates.php？idCountry=“+$（“选择#国家”）.val（），函数（j）{
var选项=“”；
$。每个（j，函数（键，值）{
选项+=''+值+''；
});
$（“选择#状态”）.html（选项）；
var foo=$（'#statepreset'）.val（）；
$（“选择#状态选项[value=“+foo+”]”）attr（'selected'，'selected'）；
});
});
});

我建议采用这种方法：

function initSelect(defaultVal) {
    $("select#countries").change(function(){
        $.getJSON("/ajax/exhibition/getstates.php?idCountry="+$("select#countries").val(),     function(j){
            var options = '';
            $.each(j, function(key, value){
                options += '<option value="' + key + '">' + value + '</option>';
            });
            $("select#state").html(options);
            $("select#state option[value="+defaultVal+"]").attr('selected', 'selected');
        });
    }).change();
}


$(document).ready(function(){
    initSelect($('#statepreset').val());
});

函数initSelect（defaultVal）{
$（“选择国家”）。更改（功能（）{
$.getJSON（“/ajax/experience/getstates.php？idCountry=“+$（“选择#国家”）.val（），函数（j）{
var选项=“”；
$。每个（j，函数（键，值）{
选项+=''+值+''；
});
$（“选择#状态”）.html（选项）；
$（“选择#状态选项[value=“+defaultVal+”]”）attr（'selected'，'selected'）；
});
}).change（）；
}
$（文档）.ready（函数（）{
initSelect（$（'#statepreset'）.val（）；
});

快速修复方法是将修改状态选择的代码放在回调（getJSON回调）中

$（“选择#国家”）.change（函数（）{
$.getJSON（“/ajax/experience/getstates.php？idCountry=“+$（“选择#国家”）.val（），函数（j）{
var选项=“”；
$。每个（j，函数（键，值）{
选项+=''+值+''；
});
$（“选择#状态”）.html（选项）；
//设置状态选择框的选定值
var foo=$（'#statepreset'）.val（）；
$（“选择#状态选项[value=“+foo+”]”）attr（'selected'，'selected'）；
});
});

---

请记住，您提供给getJson调用的回调仅在服务器应答后执行。

当国家/地区发生变化时，它应该始终选择默认值还是仅在页面加载时选择默认值？好的，这似乎有效，但这也会在每次国家/地区更改时调用，因此会在每次国家/地区更改时尝试将状态列表的选定选项重置为隐藏字段中的选项。我希望它只在加载页面上执行。使用这段代码，似乎是对我的一次很好的更干净的重写，但请参阅我的注释以获得来自harpax的答案。我认为这是个小问题，但我觉得我应该以另一种方式去解决整个问题。

function initSelect(defaultVal) {
    $("select#countries").change(function(){
        $.getJSON("/ajax/exhibition/getstates.php?idCountry="+$("select#countries").val(),     function(j){
            var options = '';
            $.each(j, function(key, value){
                options += '<option value="' + key + '">' + value + '</option>';
            });
            $("select#state").html(options);
            $("select#state option[value="+defaultVal+"]").attr('selected', 'selected');
        });
    }).change();
}


$(document).ready(function(){
    initSelect($('#statepreset').val());
});

$("select#countries").change(function(){
  $.getJSON("/ajax/exhibition/getstates.php?idCountry="+$("select#countries").val(), function(j){
        var options = '';
        $.each(j, function(key, value){
            options += '<option value="' + key + '">' + value + '</option>';
        });
    $("select#state").html(options);

    // set the selected value of the state select box
    var foo = $('#statepreset').val();
    $("select#state option[value="+foo+"]").attr('selected', 'selected');
    });
});