根据表单输入显示/隐藏选项答案

【问题标题】：Show/hide option based on form input根据表单输入显示/隐藏选项
【发布时间】：2012-08-11 22:39:09
【问题描述】：

我有两个选择菜单。一个名为#c1，一个名为#c2。 #C2是隐藏的，将在选择C1中的选项（任何选项）时显示。这很好用，但是我想要一个小的调整，由于我对 Javascript/jQuery 的了解有限，我似乎无法弄清楚。

当#c1 的选项“meta”被选中时，我希望#c2 与任何其他选项一样显示，但我希望#c2 有一个附加选项。

例如

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

【问题讨论】：

为什么您的代码中的 ID 开头有井号，而您的 jsFiddle 代码没有？
对不起，我的错，应该没有它。

标签： javascript jquery select option chained

【解决方案1】：

我不确定这是不是最好的方法，但我想它会起作用：

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>');
    }
});

希望对你有帮助

【讨论】：