Question

在我的表格中，我有两个项目选择器。选择第一个列表应始终清除第二个列表（所有元素）并使用getJSON添加的附加选项填充它。我已经尝试过至少十几种不同的方法（例如.empty（）,. find和.remove），但没有任何方法可行。提前谢谢！

<form id="devuser" action="#" class="form-horizontal form-seperated" method="post">
    <div class="form-body">
        <div class="col-md-3"><select id="select1" class="form-control select">
            <option value="m">M</option>
            <option value="f">F</option>
        </select></div>
        <div class="col-md-3"><select id="select2" class="form-control select">
        </select></div>
    </div>
</form>

这里有js代码与.empty（）示例，但我也尝试过.find（＆＃39;选项＆＃39;）和.remove（）。

$("#select1").change(function() {
var userurl = urldv + $(this).val();
  $.getJSON(userurl).done(function(data){
      for (var i=0, len=data.length; i < len; i++) {
          $("#select2").append('<option id="al'+i+'" value="'+data[i].im+'"</option>');
          $("#device"+i).append(data[i].dn;
      }
  });
  $("#select1").change(function() {
    $("#select2").empty();
        });
    });

Answer 1

使用.empty()应该可以删除所有选项元素。

的问题：

（1）您在以下行中缺少右括号：

$("#device"+i).append(data[i].dn;

（2）当您应该只执行该处理程序中的代码时，您正在第一个内部注册第二个更改事件处理程序：

$("#select1").change(function() {
    var $select1 = $(this),
        $select2 = $("#select2"),
        userurl = urldv + $select1.val();

    $select1.attr('disabled', true);
    $select2.empty();
    $.getJSON(userurl).done(function(data) {
        var optionHtml= '';
        for (var i = 0, len = data.length; i < len; i++) {
            optionHtml += '<option id="al' + i + '" value="' + data[i].im + '"</option>';
            $("#device" + i).append(data[i].dn);
        }
        $select2.append(optionHtml);
    }).always(function() {
        $select1.attr('disabled', false);
    });
});

注意：

上面的代码显示了如何通过暂时禁用第一个选择元素来阻止重叠的ajax调用。
正如其他人所指出的那样，一次附加所有选项元素会更有效。

Answer 2

你可以尝试一下。我们的想法是将JSON值加载到变量中，然后将其加载到选择框中。

$(function(){ 
 var JSONvalue = '';
 $.getJSON(userurl).done(function(data){
   for (var i=0, len=data.length; i < len; i++) {
   var JSONvalue += ('<option id="al'+i+'" value="'+data[i].im+'"</option>');
   }
 });

   $("#select1").change(function() {
      $('#select2').html(JSONvalue);
   });
});

选择列表 - 使用getJSON后删除附加元素

2 个答案: