jquery - 选项选择树

我有一些“选项选择树”代码的麻烦。第一步工作正常，但第二个不行。我不明白为什么...jquery - 选项选择树

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

来源

2013-10-10 meskeight

“0”，“1”等不是有效的CSS类。 –

我知道，但我只用它们来过滤提交选项 – meskeight

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

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

上$('#main').change()从#sub0删除所有12个<option>元素。
您将这些元素（仍然是12）传递给show_opt并对它们进行过滤，因此只剩下3个（sub0_4.1等）。
您将这3个元素附加到#sub0。现在#sub0有只有3<option>元素。
on change()还有只有3元素在#sub0。假设您这次选择main_3 - 之后filter()那些3 <option> eleh在show_opt，没有剩余。

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

来源

2013-10-10 13:23:34

如果您可以看到Js示例，那么当您更改第一个菜单的值时，它会更改第二个菜单的值。我把文本字段放在最后只是为了调试我认为show_opt函数有一个伪装，但我无法修复它 – meskeight

正如我在我的回答（和@David Fregoli也说过的）中所说的，你删除第二个菜单中的所有元素与您的filter（）不匹配，因此在下次筛选时，您只有那些之前未被删除的元素。我编辑了我的答案，使其更加清晰。 –

我遵循你的提示......现在它的工作原理！结果 - > [链接]（http://jsfiddle.net/meskeight/MYw4q/2/） – meskeight

当筛选下来，你不需要那些被删除的元素。当你做第二次过滤时，它不会从整个集合开始，而是从第一个过滤结果开始

来源

2013-10-10 13:19:43

jquery - 选项选择树

回答

相关问题