Question

我在使用“选项选择树”代码时遇到了一些麻烦。第一步它正常工作，但第二步不行。我不明白为什么......

function show_opt(id,options){
  var n = id.val();
  var nexts = (id.next('select'));

  var showOptions = options.filter('.'+n);
  nexts.html(showOptions);
  nexts.prop('selectedIndex', 0);
}

$(document).ready(function() {
  var select = $('#group1').children('select');
      var sn = select.eq(0);

      sn.change(function(){
        $('#print').val((sn.val()));

        var next_s = sn.next('select');

        var fontOptions = next_s.children('option').remove();
        show_opt(sn,fontOptions);
      });
});

以下是演示：Jsfiddle

Answer 1

当您过滤掉元素时，您不需要的元素将被删除。当你进行第二次过滤时，它不会从整个集合开始，而只是从第一个过滤结果

开始

Answer 2

提示：使用调试器查看您使用的变量值。

基本上，您的代码执行以下操作（假设您从第一个菜单中选择main_4）：

在$('#main').change()上删除<option>中的所有12个#sub0元素。
您将这些元素（仍为12）传递给show_opt并过滤它们，因此只剩下3个（sub0_4.1等）。
您将这3个元素附加到#sub0。现在#sub0只有只有3个 <option>元素。
在下一个change()上，#sub0中只有只有3个元素。假设您这次选择main_3 - filter() <option> show_opt中{3}}之后，没有任何一个留下。

希望现在很清楚为什么你的代码不起作用。

jquery - 选项选择树

2 个答案: