2012-01-11 167 views
1

这里是我有的表单元素。基于选择框选择显示隐藏表单字段

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

我想要做的是低于此添加一个选择框元素,如果用户在上面的选项中选择“没有在澳大利亚”。 我真的是最清洁最轻的代码possbile之后。

我假设我们创建一个div并设置可见性:隐藏只是不知道如何触发它。

+1

你不需要隐藏_div_,你可以有一个隐藏的_select_。尽管我猜你可能也想要一个标签等等。你可能想考虑'display:none'而不是'visibility:hidden',但这取决于你。你需要在你的“状态”select元素上处理change事件,然后通过改变其'visibility'(或display)来隐藏或显示下一个select元素。(顺便说一句,ACT为什么会持续下去?我们应该是_first _...) – nnnnnn 2012-01-11 00:29:17

+0

大声笑@nnnnnn我要去尝试和触发显示:无显示:块只是不知道如何使用js – 422 2012-01-11 00:32:13

回答

8
<!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> 
+0

优秀的,我实际上添加'快速'的元素和隐藏和显示谢谢 – 422 2012-01-11 00:52:00

+1

这涉及到jQuery,这项任务有点矫枉过正。 – ngen 2012-01-11 00:54:20

5

这个怎么样? 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'; 
    } 
} 
+0

做选择元素通常有'块'显示?可能需要设置'.display ='';',它可以有效地删除内联样式并允许默认值(来自相关风格级联)生效。 – nnnnnn 2012-01-11 00:47:07

+0

thankyou @ngen非常感谢,现在修复:) – 422 2012-01-11 00:52:18

+0

不知道是否OP将实际使用内联样式,但这里有另一个选项'document.getElementById('extra')。removeAttribute('style')'。 – ngen 2012-01-11 00:53:23

相关问题