基于表单输入的显示/隐藏选项

我有两个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

基于表单输入的显示/隐藏选项

回答

相关问题