Question

i need to display particular dropdownlist and hide other dropdownlist based on the selection made on parent dropdownlist.
for instance , i have parent dropdownlist of which selection will be made :

<select id="DropDownList1">
                    <option value="Schemes1">Schemes1</option>
                    <option value="Schemes2">Schemes2</option>
                    <option value="Schemes3">Schemes3</option>
                </select>

The other 3 list are:

                <p>Schemes1 List</p>
                <select id="DropDownList2">
                <option value="product1">Camera</option>
                <option value="product2">DVD</option>
                <option value="product3">AC</option>
            </select>
            <p>Schemes2 List</p>
                <select id="DropDownList3">
                <option value="product4">bat</option>
                <option value="product5">ball</option>
                <option value="product6">complete kit</option>
            </select>
            <p>Schemes3 List</p>
                <select id="DropDownList4">
                <option value="product7">laptop</option>
                <option value="product8">HD</option>
                <option value="product9">RAM</option>
            </select>

So if the scheme1 is selected the scheme1 list should be displayed while others should be hidden vice versa, any ideas on how to get this working using jquery

updated :

 $('#login').click(function (e) {
                    e.preventDefault();

                    $("#dialog-form").dialog("open");
                });

dialog form have all the dropdownlist

Answer 1

$("#DropDownList1").change(function(){
    indx = $("#DropDownList1 option:selected").index();
    indx +=1;
    $("#DropDownList2,#DropDownList3,#DropDownList4").each(function(){
       $(this).hide();
    });
   $("#DropDownList"+(indx+1)).show()
})