ansaurus

Question

Hide/Show <select> depending on the other <select>

Answer 1

+1 A:

It is really simple.
First of all prepare change event handler http://api.jquery.com/change/
Second, check value of your select val : http://api.jquery.com/val/
Third, display or hide your second select. http://api.jquery.com/hide/ or http://api.jquery.com/show/

Rin 2010-07-25 21:13:24

Answer 2

+1 A:

Listen to the change event for the select list. In the change event, if the selected value is "USA" or "Canada" then show the other select list, otherwise hide it.

See an example.

Assuming the select structure looks like this:

<select id="countries">
    <option val="USA">USA</option>
    <option val="Canada">Canada</option>
    <option val="Australia">Australia</option>
    ...
</select>

<select id="cities">
    <option val="Vancouver">Vancouver</option>
    <option val="New York">New York</option>
    ...
</select>

Listen to the change event on the countries array.

$("#countries").change(function() {
    // find the selected country
    var selectedCountry = $(this).val();
    // if US or Canada
    if(selectedCountry == "USA" || selectedCountry == "Canada") {
        // show the cities list
        $("#cities").show();
    }
    // otherwise hide it
    else {
        $("#cities").hide();
    }
});

Anurag 2010-07-25 21:13:26

Answer 3

A:

Doesn't works, what I do wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

<script>
  // Wrap your jQuery code to make sure it runs after the DOM is ready
  //     and added a link to the jQuery library which must be loaded first.
$(function() {
    $("#countries").change(function() {
        // find the selected country
        var selectedCountry = $(this).val();
        // if US or Canada
        if(selectedCountry == "USA" || selectedCountry == "Canada") {
            // show the cities list
            $("#cities").show();
        }
        // otherwise hide it
        else {
            $("#cities").hide();
        }
    });
});
</script>
</head>

<body>
<select id="countries">
    <option val="USA">USA</option>
    <option val="Canada">Canada</option>
    <option val="Australia">Australia</option>
</select>

<select id="cities">
    <option val="Vancouver">Vancouver</option>
    <option val="New York">New York</option>
</select>

</body>
</html>

TRAVA 2010-07-25 21:19:43

Wrap it inside the ready callback. See http://jsfiddle.net/DAeus/1/. Also this should be a comment ideally, not an answer.

Anurag 2010-07-25 21:21:20

too big to be a comment =\

TRAVA 2010-07-25 21:27:05

Thank you so much!

TRAVA 2010-07-25 21:28:10

TRAVA - I edited your code above to make the jQuery code wait to run until the DOM is loaded, and to load the jQuery library.

patrick dw 2010-07-25 21:29:04

Thanks, I get it.

TRAVA 2010-07-25 21:32:47

ansaurus

tags:

views:

answers:

Hide/Show <select> depending on the other <select>

related questions