javascript - 使用 jQuery 动态更改表单字段选项(并恢复以前选择的选项)

Question

我对 jQuery 和 JavaScript 都很陌生，所以任何人都可以指出我在这里遗漏了什么吗？

我有一个包含多对选择字段的表单，其中第二个字段的内容依赖于第一个字段的选择。 一旦从第一个值中选择了一个值，一段 jQuery 代码就会清空相应的第二个选择选项，将新值作为 JSON 获取并将它们作为新的选择值插入。所有这些都适用于我编写的代码。

但是，如果用户选择了第二个值，我想尽可能恢复它(意思是如果新值还包括之前选择的值)。

我尝试通过首先保存第二个值然后在插入新选项后尝试设置它来做到这一点。这没有用。但是，当尝试调试时，我在恢复第二个值之前插入了一个 alert() 并且它确实有效......

我是否遗漏了一些非常基本的东西？任何帮助将不胜感激。

HTML:

<select name="party-0-first" id="id_party-0-first">
<option value="" selected="selected">---------</option>
<option value="1">first_value1</option>
<option value="2">first_value2</option>
<option value="3">first_value3</option>
<option value="4">first_value4</option>
</select>

<select name="party-0-second" id="id_party-0-second">
<option value="" selected="selected">---------</option>
<option value="1">second_value1</option>
<option value="2">second_value2</option>
<option value="3">second_value3</option>
<option value="4">second_value4</option>
</select>

<select name="party-1-first" id="id_party-1-first">
...

JavaScript:

$.fn.setSecond = function() {
    var divName = $(this).attr("name");
    divName = divName.replace('-first', '');
    divName = divName.replace('party-', '');

    // Save the currently selected value of the "second" select box
    // This seems to work properly
    setValue = $('#id_party-' + divName + '-second').val();

    // Get the new values
    $.getJSON("/json_opsys/", { client: $(this).val() },
    function(data){
        $('#id_party-' + divName + '-second').empty();
        $('#id_party-' + divName + '-second').append('<option value="" selected="selected">---------</option>');
        $.each(data, function(i, item){
            $('#id_party-' + divName + '-second').append('<option value="' + item.pk + '">' + item.fields.name + '</option>');
        });
    });

    // Here I try to restore the selected value
    // This does not work normally, however if I place a javascript alert() before
    // this for some reason it does work
    $('#id_party-' + divName + '-second').val(setValue);


$(document).ready(function(){
    $('[id*=first]').change(function() {
        $(this).setSecond();
    });
});

Answer 1

好吧，看起来您的 getJSON() 调用涉及该问题。

请记住，从一开始，所有 ajax 请求都是 ASYNC，这意味着您的最后一行代码 很可能在调用 getJSON() 成功事件处理程序之前执行。