根据选择框选择显示隐藏的表单字段答案

【问题标题】：Display hidden form field based on select box choice根据选择框选择显示隐藏的表单字段
【发布时间】：2012-01-11 00:05:47
【问题描述】：

这是我拥有的一个表单元素。

<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 并设置了可见性：隐藏只是不知道如何触发它。

【问题讨论】：

你不需要一个隐藏的div，你可以有一个隐藏的select。虽然我猜你可能还想要一个标签等等。您可能想考虑display:none 而不是visibility:hidden，但这取决于您。您需要在“状态”选择元素上处理更改事件，然后通过更改其visibility（或display）来隐藏或显示下一个选择元素。（顺便问一下，为什么ACT 是最后一个？我们应该成为第一...)
lol @nnnnnn 我打算尝试触发 display:none to display:block 只是不确定如何使用 js 来完成

标签： javascript forms

【解决方案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>

【讨论】：

太棒了，我实际上在元素中添加了“快速”，并尊重隐藏和显示谢谢
这涉及到 jQuery，这个任务有点矫枉过正。

【解决方案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>

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

【讨论】：

选择元素通常是否有“块”显示？可能想要设置.display = '';，它有效地删除了内联样式并让默认值（来自相关样式级联）生效。
不确定 OP 是否真的会使用内联样式，但这里有另一个选项 document.getElementById('extra').removeAttribute('style')。