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

Question

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

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

});
$(document).ready(function(){
// preset the state select box on page ready
$('select#countries').change();

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


});
</script>

Answer 1

我会建议这种方法：

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());
});

Answer 2

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

$("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');
    });
});

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

Answer 3

您可以将预选代码添加到 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');
    });
});
});