CODEWITHSUNDEEP
javascripthtml
Qui
Qui

Reputation: 108

Hide and display HTML elements based on what was chosen in a dropdown

My website is created in ASP classic - VBScript (not my choice and is a language I've not had experience with before this). I'm trying to create a webpage where in it: A dropdown menu reveals an additional dropdown based on what was selected in the first one. I'm trying to use a javascript function to achieve this.

Example:

In the first dropdown the user chooses ice cream or crisps. Based on what the user selects another dropdown gives the choice of flavour.

Ice cream: vanilla, chocolate, mint.
Crisps: ready salted, cheese & onion, salt & vinegar.

This is what my code currently looks like:

HTML

<select id="food" onchange="fctCheck(this.value)">
    <option value="">Choose an item</option>
    <option value="icecream">Ice cream</option>
    <option value="crisps">Crisps</option>
</select>  


<select id="icecream" style="display:none">
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
    <option value="mint">Mint</option>
</select>  


<select id="crisps" style="display:none">
    <option value="readysalted">Ready Salted</option>
    <option value="cheeseandonion">Cheese and Onion</option>
    <option value="saltandvinegar">Salt and Vinegar</option>
</select>

.

javascript

function fctCheck(food)
    {
    if (food == "")
        {document.getElementById(food).style.display = "none";}
    else
        {document.getElementById(food).style.display = "block";}
    }

Upvotes: 1

Views: 1812

Answers (3)

Florian Loch
Florian Loch

Reputation: 809

as mentioned by st3inn this.value is absolutely fine - there is just the typo by document.getElement==>B<==yId.

But your code has the disadvantage, that a user could select both options and so both sub-selections would be visible.

You could avoid this by first hiding all sub-selections before showing the one for the selected item. This could be done that way (via the addiotional name-attribute, or, if you choose to work with jQuery you could do something more sophisticated instead):

Example (with comments) on JSFiddle

Javascript:

function fctCheck(food) {
    var elems = document.getElementsByName("subselector");
        for (var i = 0; i < elems.length; i++) {
            elems.item(i).style.display = "none";
        }
        document.getElementById(food).style.display = "block";
    }

HTML:

<select id="food"onchange="fctCheck(this.value);">
    <option value="">Choose an item</option>
    <option value="icecream">Ice cream</option>
    <option value="crisps">Crisps</option>
</select>  


<select id="icecream" name="subselector" style="display:none">
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
    <option value="mint">Mint</option>
</select>  


<select id="crisps" name="subselector" style="display:none">
    <option value="readysalted">Ready Salted</option>
    <option value="cheeseandonion">Cheese and Onion</option>
    <option value="saltandvinegar">Salt and Vinegar</option>
</select>

Cheers,
Florian

Upvotes: 3

st3inn
st3inn

Reputation: 1596

You just have a typo.

function fctCheck(food)
{
    if (food == "") {
        document.getElementById(food).style.display = "none";}
    } else {
        document.getElementById(food).style.display = "block";
    }
}

should work. 

this.value

is equivalent to

this.options[this.options.selectedIndex].value

Upvotes: 0

antyrat
antyrat

Reputation: 27765

You need to check for option value instead:

fctCheck(this.options[ this.options.selectedIndex ].value)

this.options is collection of <option> elements inside your current <select>, and this.options.selectedIndex is integer value that show what option currently selected.

BTW you have an typo in your code:

document.getElementbyId

should be 

document.getElementById

See jsFiddle demo

Upvotes: 0

Related Questions