基於表單輸入的顯示/隱藏選項

我有兩個selectmenu的。一個命名爲＃c1，另一個命名爲＃c2。＃c2被隱藏，並且在c1中的選項（任何選項）被選中時將顯示。這工作正常，但我想要一個小調整，我似乎無法弄清楚由於我有限的JavaScript/jQuery的知識。基於表單輸入的顯示/隱藏選項

當＃c1的選項「meta」被選中時，我想顯示＃c2和其他選項一樣，但是我想＃c2有一個aditional選項。

E.g.

<select id="c1"> 
<option>Option 1</option> 
<option>Option 2, etc.</option> 
<option>Metadata</option> 
</select> 

<select id="c2"> 
<option>Option 1</option> 
<option>Option 2, etc.</option> 
<option>Metadata</option> // This should be shown only when "metadata" in #c1 is selected and hidden when not. 
</select>

我遇到的一個問題是，選項很難隱藏只用CSS和我的JS知識是有限的。一個解決方案是here，但我不能模仿到我想要的鏈接選擇。

我在這裏創建了一個Fiddle，所以你可以看到所有的選擇框和當前的JS。

來源

2012-08-15 mat

爲什麼在你的代碼在這裏的ID具有英鎊跡象開始，但你的jsFiddle代碼不？ – j08691 2012-08-15 15:51:03

對不起，我的壞，應該沒有它。 – mat 2012-08-16 07:48:37

我不知道它是做的最好的方式，但我想它會工作：

var optionsArray = [{'key':'1','value':'val1','text':'Option 1'}, 
      {'key':'2','value':'val2','text':'Option 2, etc.'}, 
      ]; // Array of the #2 Options without the metadata 


$('select[name="c1"]').change(function() { 

    // Put your show/hide code here 

    $('select[name="c2"] option').remove();// remove all the c2 options (In case there is already metadata) 
    $.each(optionsArray, function(i){ //add all the basic options 
      $('select[name="c2"]').append($("<option></option>") 
      .attr("value",optionsArray[i]['value']) 
       .text(optionsArray[i]['text'])); 
    }); 

    var valSelect1 = $(this).val(); 
    if (valSelect1 == 'Metadata'){ // add metadata only if the c1 option is metadata 
     $('select[name="c2"]').append('<option value="Metadata">Metadata</option>'); 
    } 
});

希望它會幫助

來源

2013-01-10 07:02:39 BastienSander

基於表單輸入的顯示/隱藏選項

回答

相關問題