Question

I want to implement the following system of drop down lists:

I’m aware that drop down lists are implemented using <select> statements. However, I’m not sure if I need to use Javascript commands to handle my requirements listed in the picture. How would you suggest to handle this?

Thanks in advance!

Answer 1

You will have all three drop down on the page but dropdown 2 and 3 will be hidden. On change of first drop down you will have to check the value of first drop down and show second and third dropdown. Demo is available here

In html we define three dropdowns first is visible and second and third are hidden. We will show the hidden dropdown when 3 is selected from first dropdown

<select id="sel1" >    
    <option > 1 </option>
    <option > 2 </option>
    <option > 3 </option>
</select>

<select id="sel2" style="display:none" >
    <option > 1 </option>
    <option > 2 </option>
    <option > 3 </option>
</select>

<select id="sel3" style="display:none" >
    <option > 1 </option>
    <option > 2 </option>
    <option > 3 </option>
</select>

​In javascript we have show the hidden dropdowns when 3 is selected from first drop down

$('#sel1').change(function ()
{   
    if($(this).val() == "3")
    {

        $('#sel2').show();
        $('#sel3').show();
    }
}
);
​