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上稍微重复的示例。