javascript - 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.

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.

Share Improve this question asked Jan 11, 2012 at 0:05 422 5,77024 gold badges86 silver badges140 bronze badges

1 You don't need a hidden div, you can have a hidden select. Although I guess you probably also want a label and so forth. You may want to think about display:none rather than visibility:hidden, but that's up to you. You need to handle the change event on your "state" select element, and then hide or show the next select element by changing its visibility (or display).(By the way, why is the ACT last? We should be first...) – nnnnnn Commented Jan 11, 2012 at 0:29
lol @nnnnnn I was gonna try and trigger display:none to display:block just not sure how to do it using js – 422 Commented Jan 11, 2012 at 0:32

Add a comment |

2 Answers 2

Sorted by: Reset to default 9

<!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>

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>

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Display hidden form field based on select box choice - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)