隱藏選擇項目，如果另一個選擇項中選擇

我試圖做一個選擇，將顯示基於關閉的你在另一個選擇字段選擇的選項。它看起來像這樣：隱藏選擇項目，如果另一個選擇項中選擇

  <select name="field2" id="field2" required="required"> 
       <option id="field2-1" value="os1"> 
        os1 
       </option> 
       <option id="field2-2" value="os2"> 
        os2 
       </option> 
       <option id="field2-3" value="os3"> 
        os3 
       </option> 
      </select>

然後我有這些選項的第二選擇：

  <select name="field3" id="field3" required="required"> 
       <option id="field3-1" value="dl1"> 
        dl1 
       </option> 
       <option id="field3-2" value="dl2"> 
        dl2 
       </option> 
      </select>

基本上我需要發生的事情是這樣的：如果OS1在第一選擇中選擇，那麼這兩個DL1 dl2將在第二個選擇器中可用。

如果OS2或Os 3在第一選擇器被選擇時，DL1將被隱藏，並且只DL2將在第二選擇器顯示。

我似乎無法找到這樣的固溶體，但我不是在JS是最好的，所以希望你們可以點我在正確的方向。

謝謝:)

來源

2012-08-16 Justin

香草JS解決方案（不需要jQuery的） - DEMO

var selectOne = document.getElementById("field2"); 

selectOne.addEventListener("change", function() { 
    if (this.options[this.selectedIndex].value == 'os2' || this.options[this.selectedIndex].value == 'os3') { 
     document.getElementById('field3-2').style.display = "none"; 
    } else { 
     document.getElementById('field3-2').style.display = "block"; 
    } 
}, false);

來源

2012-08-16 19:57:42

它的工作，謝謝。出於好奇，我會如何選擇field3-1，因爲field3-2被禁用？ – Justin 2012-08-16 20:11:30

它已被選中，因爲它是唯一可用的選項 – 2012-08-16 20:18:48

問題是，即使它被選中，它似乎也不是。另一個選項是隱藏的，但它仍然表示選擇了其他選項。你可以進入選擇器並選擇唯一的選項，這將解決它，但我希望它自動做到這一點。我發現採用的document.getElementById（「field3-2」）一個可能的修復選定=真。但它似乎沒有工作的權利與我的風格。 – Justin 2012-08-16 20:32:55

有幾種方法，你可以嘗試這一點，但也許是最簡單的一種是有兩個「模板」選擇隱藏的元素，然後從這些隱藏的SELECT元素的複製HTML ＃field3 SELECT元素。在這個例子中，我假設你沒有使用jQuery。

例如：

<SELECT id="template_1"> 
      <option id="field3-1" value="dl1"> 
       dl1 
      </option> 
      <option id="field3-2" value="dl2"> 
       dl2 
      </option> 
</SELECT> 
<SELECT id="template_2"> 
      <option id="field3-1" value="dl1"> 
       dl1 
      </option> 
      <option id="field3-2" value="dl2"> 
       dl2 
      </option> 
</SELECT>

那麼你的JavaScript是：

var field2 = document.getElementById('field2'); 
var field3 = document.getElementById('field3'); 
var template1 = document.getElementById('template_1'); 
var template2 = document.getElementById('template_2'); 
var os = field2.options[field2.selectedIndex]; 
if (os == 'os1') { 
    field3.innerHTML = template1.innerHTML; 
} 
else { 
    field3.innerHTML = template2.innerHTML; 
}

來源

2012-08-16 19:51:49 davidethell

編輯：對不起，沒有意識到缺乏jquery標籤。好吧，如果你想使用jQuery，下面的代碼將工作：

$('#field2').change(function(){ 
    if($(this).val() === 'os2' || $(this).val() === 'os3'){ 
     $('#field3-1').hide(); 
    } 
    else{ 
     $('#field3-1').show(); 
    } 
});

來源

2012-08-16 19:51:51 wanovak

的問題與此代碼是它是破壞性的。一旦你選擇了os2或者os3，如果他們改變主意並且再次選擇os1，你就不能得到field3-1。 – davidethell 2012-08-16 19:57:16

@davidethell好點。我會更新答案。 – wanovak 2012-08-16 19:58:25

@wanovak謝謝，併爲標籤問題感到抱歉。問題是，即使選項是隱藏的，喜歡它的選擇，它仍然看起來。有沒有辦法強制選擇其他選項？ – Justin 2012-08-16 20:49:00

隱藏選擇項目，如果另一個選擇項中選擇

回答

相關問題