jquery级联下拉问题

Question

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

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

当选择一个项目时，会在末尾添加一个数字以保持唯一的 ID。

这是 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();
});

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

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

这里是 jsfiddle.