Simple show & hide with jQuery using an onchange event

Written by Joe on Wednesday, September 22, 2010

Show or hide items based on a <select> option value

Recently I was working on a website with a registration page that needed to add a country selection. If you don't know, not all countries have states, and in this case I was adding Canada, and they have provinces. The solution, if a user selects Canada, show the province drop-down, if a user selects United States, show the state drop-down. Here is a simple script to show and hide form elements.

What you need

A copy of the jQuery library and a text editor, I use notepad, and that's all.

The form HTML

<p class="input" id="stateSelect">
    <label for="billstate"><span class="req">*</span>State:</label>
    <select name="province" id="province" style="display:none;">
            <option value="ON" >Ontario</option>
            <option value="QC" >Quebec</option>
            <option value="BC" >British Columbia</option>
            <option value="AB" >Alberta</option>
            <option value="MB" >Manitoba</option>
            <option value="SK" >Saskatchewan</option>
            <option value="NS" >Nova Scotia</option>
            <option value="NB" >New Brunswick</option>
            <option value="NL" >Newfoundland and Labrador</option>
            <option value="PE" >Prince Edward Island</option>
            <option value="NT" >Northwest Territories</option>
            <option value="YT" >Yukon</option>
            <option value="NU" >Nunavut</option>
        </select>

    <select name="billstate" id="billstate">
            <option value="AL" >Alabama</option>
            <option value="AK" >Alaska</option>
            <option value="AZ" >Arizona</option>
            <option value="AR" >Arkansas</option>
            <option value="CA" >California</option>
            <option value="CO" >Colorado</option>
            <option value="CT" >Connecticut</option>
            <option value="DE" >Delaware</option>
            <option value="DC" >District Of Columbia</option>
            <option value="FL" >Florida</option>
            <option value="GA" >Georgia</option>
            <option value="HI" >Hawaii</option>
            <option value="ID" >Idaho</option>
            <option value="IL" >Illinois</option>
            <option value="IN" >Indiana</option>
            <option value="IA" >Iowa</option>
            <option value="KS" >Kansas</option>
            <option value="KY" >Kentucky</option>
            <option value="LA" >Louisiana</option>
            <option value="ME" >Maine</option>
            <option value="MD" >Maryland</option>
            <option value="MA" >Massachusetts</option>
            <option value="MI" >Michigan</option>
            <option value="MN" >Minnesota</option>
            <option value="MS" >Mississippi</option>
            <option value="MO" >Missouri</option>
            <option value="MT" >Montana</option>
            <option value="NE" >Nebraska</option>
            <option value="NV" >Nevada</option>
            <option value="NH" >New Hampshire</option>
            <option value="NJ" selected="selected">New Jersey</option>
            <option value="NM" >New Mexico</option>
            <option value="NY" >New York</option>
            <option value="NC" >North Carolina</option>
            <option value="ND" >North Dakota</option>
            <option value="OH" >Ohio</option>
            <option value="OK" >Oklahoma</option>
            <option value="OR" >Oregon</option>
            <option value="PA" >Pennsylvania</option>
            <option value="RI" >Rhode Island</option>
            <option value="SC" >South Carolina</option>
            <option value="SD" >South Dakota</option>
            <option value="TN" >Tennessee</option>
            <option value="TX" >Texas</option>
            <option value="UT" >Utah</option>
            <option value="VT" >Vermont</option>
            <option value="VA" >Virginia</option>
            <option value="WA" >Washington</option>
            <option value="WV" >West Virginia</option>
            <option value="WI" >Wisconsin</option>
            <option value="WY" >Wyoming</option>
        </select>
</p>
        
<p class="input">
    <label for="billcountry"><span class="req">*</span>Country:</label>
    <select name="billcountry" id="billcountry" onchange="show_province();">
        <option value="US" >United States</option>
        <option value="CA" >Canada</option>
    </select>
</p>

Notice the onchange="show_province();" inside the <select>. This is telling the browser when the selection changes, call the show_province() function. Also, since the default country selection is usa, we set the province select box to display:none. This will hide it until we want to show it.

The jQuery/javascript

function show_province()
{
    var country = $('select#billcountry').val();
    if(country != "US")
    {
        $("select#billstate").hide();
        $("select#province").show();
        $("p#stateSelect label").html("<span class='req'>*</span>Province:");
    }
    else
    {
        $("select#billstate").show();
        $("select#province").hide();
        $("p#stateSelect label").html("<span class='req'>*</span>State:");
    }
}

Pretty simple, let me explain it. The first line var country = $('select#billcountry').val(); is getting the value of the select box with an id of "billcountry" and giving it to the varible country. We then use a simple if statement to check the value of "country" and show the approptiate select box.

This line $("p#stateSelect label").html("<span class='req'>*</span>Province:"); changes the value of our label. If the country is "CA" or canada, the label will say province, anything else the label will say state.

This is a simple example of how to show or hide elements based on the value of a select box. The same function can be used to show and hide pretty much anything. You can also use it on radio buttons, anchors, paragraphs, etc.. Your creativity is your only limit.

Need this functionality on your website? Let us know! Contact us today.

Like what you’ve read?

Link back to us.
http://www.revolutionunlimited.com/news-and-articles/javascript-jquery/2010-09-22/simple-show-and-hide-with-jquery-using-an-onchange-event/

OR Join Our Mailing List