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()成功事件处理程序之前执行。

Answer 2

设置变量“setValue”时，请尝试使用var声明：

var setValue = $('#id_party-' + divName + '-second').val();

但我认为这不是问题所在。问题是你试图在实际完成getJSON之前重置某些将要运行的代码中的值。尝试移动在传递给getJSON的函数内设置值的东西。

$.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>'); }); $('#id_party-' + divName + '-second').val(setValue); });

使用jQuery动态更改表单字段选项（并恢复以前选择的选项）

2 个答案: