CODEWITHSUNDEEP
javascriptforms
422
422

Reputation: 5770

Display hidden form field based on select box choice

Here is a form element I have.

<select id="state" name="state" style="width: 212px;">
<option value="nsw">New South Wales</option>
<option value="qld">Queensland</option>
<option value="vic">Victoria</option>
<option value="nt">Northern Territory</option>
<option value="tas">Tasmania</option>
<option value="sa">South Australia</option>
<option value="wa">Western Australia</option>
<option value="act">Australian Capital Territory</option>
<option value="notinoz">Not in Australia</option>
 </select>

What I want to do is below this add another select box element , if user chooses "not in Australia" in the options above. I am really after the cleanest lightest code possbile.

I am presuming we create a div and set visibility:hidden just not sure how to trigger it.

Upvotes: 3

Views: 35241

Answers (2)

Greg Wineman
Greg Wineman

Reputation: 106

<!doctype html>
<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function (){
            $("#state").change(function() {
                // foo is the id of the other select box 
                if ($(this).val() != "notinoz") {
                    $("#foo").show();
                }else{
                    $("#foo").hide();
                } 
            });
        });
    </script>

</head>


<body>
    <p>
        <select id="state" name="state" style="width: 212px;">
            <option value="nsw">New South Wales</option>
            <option value="qld">Queensland</option>
            <option value="vic">Victoria</option>
            <option value="nt">Northern Territory</option>
            <option value="tas">Tasmania</option>
            <option value="sa">South Australia</option>
            <option value="wa">Western Australia</option>
            <option value="act">Australian Capital Territory</option>
            <option value="notinoz">Not in Australia</option>
        </select>
    </p>

    <p id="foo" style="display:none;">
        <select style="width: 212px;>
            <option value="item1">Item</option>
            <option value="item2">Item</option>
            <option value="item3">Item</option>
        </select>
    </p>

</body>

Upvotes: 9

ngen
ngen

Reputation: 8966

How about this? http://jsfiddle.net/JKqWf/4/

HTML

<select id="state" name="state" style="width: 212px;" onclick='test()'>
<option value="nsw">New South Wales</option>
<option value="qld">Queensland</option>
<option value="vic">Victoria</option>
<option value="nt">Northern Territory</option>
<option value="tas">Tasmania</option>
<option value="sa">South Australia</option>
<option value="wa">Western Australia</option>
<option value="act">Australian Capital Territory</option>
<option value="notinoz">Not in Australia</option>
 </select>

<select id="extra" name="extra" style="display: none">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

JS

function test() {
    if (document.getElementById('state').value == 'notinoz') {
        document.getElementById('extra').style.display = 'block';
    } else {
        document.getElementById('extra').style.display = 'none';
    }
}

Upvotes: 6

Related Questions