基於選擇框選擇顯示隱藏表單字段

這裏是我有的表單元素。基於選擇框選擇顯示隱藏表單字段

<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並設置可見性：隱藏只是不知道如何觸發它。

來源

2012-01-11 422

你不需要隱藏_div_，你可以有一個隱藏的_select_。儘管我猜你可能也想要一個標籤等等。你可能想考慮'display：none'而不是'visibility：hidden'，但這取決於你。你需要在你的「狀態」select元素上處理change事件，然後通過改變其'visibility'（或display）來隱藏或顯示下一個select元素。（順便說一句，ACT爲什麼會持續下去？我們應該是_first _...） – nnnnnn 2012-01-11 00:29:17

大聲笑@nnnnnn我要去嘗試和觸發顯示：無顯示：塊只是不知道如何使用js – 422 2012-01-11 00:32:13

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

來源

2012-01-11 00:36:09

優秀的，我實際上添加'快速'的元素和隱藏和顯示謝謝 – 422 2012-01-11 00:52:00

這涉及到jQuery，這項任務有點矯枉過正。 – ngen 2012-01-11 00:54:20

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

來源

2012-01-11 00:31:07 ngen

做選擇元素通常有'塊'顯示？可能需要設置'.display ='';'，它可以有效地刪除內聯樣式並允許默認值（來自相關風格級聯）生效。 – nnnnnn 2012-01-11 00:47:07

thankyou @ngen非常感謝，現在修復:) – 422 2012-01-11 00:52:18

不知道是否OP將實際使用內聯樣式，但這裏有另一個選項'document.getElementById（'extra'）。removeAttribute（'style'）'。 – ngen 2012-01-11 00:53:23

基於選擇框選擇顯示隱藏表單字段

回答

相關問題