jquery级联下拉问题

Question

我正在使用 jquery 根据第一个和第二个菜单的选择来调出第二个和第三个下拉菜单。

我采用的方法是将所有后续下拉菜单设置为 style="display:none" 并使用 .toggle() 功能在上一个下拉菜单中选择时显示它们。

When an item is selected a digit is added to the end to maintain unique id's.

这是 jsfiddle：http://jsfiddle.net/36E6m/3/

如您所见，html 是不完整的，但如果您从第一个选择“Mortice”，从第二个选择“Deadlock”，则足以对其进行测试。

到目前为止，我的第一个菜单适用于所有项目（以及两个具有有效 html 的项目），但即使这样也停止工作了。

现在只有第一个菜单（Mortice）中的第一个选项会弹出另一个菜单。

任何关于我做错了什么或如何做得更好的帮助将不胜感激。

非常感谢，

尼克。

Answer 1

不要使用.click()，而是使用.change()。

$('#type_1').change(function() {
    var o = $(this).find(":selected");
    $('#' + o.attr("id") + '2').toggle();
});

另外，id 在 dom 中的每个元素都必须是唯一的。 （类型 2 下的两个下拉菜单具有相同的 id）下拉菜单的选择器应该类似于

$("select[name='type_2']").change(function() {
    var o = $(this).find(":selected");
    $('#' + o.attr("id") + '2').toggle();
});

这是jsfiddle 的一个稍微修改的示例。