CODEWITHSUNDEEP
javascriptdom-events
S. N
S. N

Reputation: 3949

JavaScript Select within a Select

I have a drop down menu, with two options:

<select name="chs" value="" id = ""/>
                <option value="">ICE Cream</option>
                <option value="">Juice</option>
</select>

This is what I want to have: in the first page you see a select, with two option, if you choose ICE cream another select will appear with different flavors (chocolate, vanilla, etc), and the same for juice.

This is what I already have:

html:

<label>Choose Skin</label><br /><select name="na" value="" id = ""/>
            <option value="">ICE Cream</option>
            <option value="">Juice</option>
        </select>
        <select name="icecreamfla" value="" onchange="showSelect()" id = "framework"/>
            <option id="jm">vanilla</option>
            <option id = "wp">chocholate</option>
        </select>
        <input type="submit" name = "redirect" value="go" />

The JavaScript:

function showSelect()
    {
        var select = document.getElementById('skin');
         if(select.value == "juice"){
            alert('saeed khare!');
         }
         else{
            var option = document.getElementById('icecreamfla');
            option.style.display = 'inline';
         }
    }

option.style.display used to be 'none', then I changed it to inline. if any one can help please do it.

Upvotes: 0

Views: 178

Answers (2)

andyb
andyb

Reputation: 43823

Here is a small demo with the flavours <select> only appearing when Ice Cream is selected.

It should be easy to follow to implement this to display a different <select> if the user chooses Juice.

Edit: If you want the selected value you can use types.options[types.selectedIndex].text to get it using the variables in my demo.

Upvotes: 1

Srikanth Venkatesh
Srikanth Venkatesh

Reputation: 2812

Is this you want to do it .

       <script language='javascript'>

            function showSelect()
            {
               var select = document.getElementById('skin').value;
               if(select == "ICE Cream"){
             var str="<select name='icecreamfla' value=''  id = 'icecreamfla'/>"
                   +"<option id='jm'>vanilla</option>"+
                    "<option id ='wp'>chocholate</option> </select>";
                     document.getElementById("flavour").innerHTML=str;   

                                      }
            }


   <label>Choose Skin</label><br /><select name="na" value="" id = "skin" onchange="showSelect()">
        <option value="ICE Cream">ICE Cream</option>
        <option value="Juice">Juice</option>
    </select>
    <div id="flavour"></div>

    <input type="submit" name = "redirect" value="go" />

Upvotes: 0

Related Questions