根據選擇框選擇顯示隱藏的表單字段

Question

這是我的表單元素。

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

我想要做的是在下面添加另一個選擇框元素，如果用戶在上面的選項中選擇“不在澳大利亞”。 我真的追求最干凈最輕的代碼。

我假設我們創建一個div並設置可見性：隱藏但不確定如何觸發它。

Answer 1

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

Answer 2

這個怎么樣？ 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';
    }
}

根據選擇框選擇顯示隱藏的表單字段

問題描述

2 個解決方案

解決方案1
9 已采納 2012-01-11 00:36:09

解決方案2
6 2012-01-11 00:31:07

根據選擇框選擇顯示隱藏的表單字段

問題描述

2 個解決方案

解決方案1 9 已采納 2012-01-11 00:36:09

解決方案2 6 2012-01-11 00:31:07

解決方案1
9 已采納 2012-01-11 00:36:09

解決方案2
6 2012-01-11 00:31:07