jquery cascading drop down problem

I'm using jquery to bring up a second and third drop down menu based on the selection of the first and second menus.

The method I've adopted is to have all the subsequent drop downs as style="display:none" and use the .toggle() feature to show them when selected in the previous drop down.

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

Here's the jsfiddle: http://jsfiddle.net/36E6m/3/

As you can see, the html is incomplete but there's enough there to test it if you select 'Mortice' from the first and 'Deadlock' from the second.

So far I've had the first menu working for all items (well the two that have valid html) but even that's stopped working.

Now only the first selection in the first menu (Mortice) will bring up another menu.

Any help on what I'm doing wrong or how I could be doing it better would be gratefully received.开发者_如何学Go

Many thanks,

Nick.

Instead of using .click() look into using .change().

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

Also an id has to be unique per element in the dom. (your two drop down under type 2 have the same id) Your selector for the dropdowns should be something like

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

Here is a slightly reworked example on jsfiddle.