javascript - 使用一个选择来确定表单上的哪些其他选择可见

Question

我的表单上有一个主要类别选择:

<select name ="main_category">
<option value = "maincat1">Main Cat 1</option>
<option value = "maincat2">Main Cat 2</option>
</select>

根据此处选择的选项值，我想让其他选择可见/不可见。

我认为对数组进行硬编码将是最简单的解决方案，用于根据 main_category 选择中的选项来决定要显示哪些选择。

所以:

maincat1_array = 'select1, select2, select3'
maincat2_array = 'select2, select4'

在这种情况下，如果在主下拉列表中选择了 maincat1，我希望看到:

<select1 display=""></select>
<select2 display=""></select>
<select3 display=""></select>
<select4 display="none"></select>

如果在主下拉列表中选择了 maincat2，我希望看到:

<select1 display="none"></select>
<select2 display=""></select>
<select3 display="none"></select>
<select4 display=""></select>

我知道需要涉及一些 Javascript 或 JQuery，但我完全是初学者。我确切地知道我想做什么，但无法找出最好的方法。

Answer 1

我会说这样做:

首先，为所有选择(#main_category 除外)指定一个类，以便可以一起引用它们。

var rules = {
    maincat1: ['select1','select2','select3'],
    maincat2: ['select2','select4']
}

$('#main_category').change(function(){
    var target = $(this).val();
    //hide all selects first
    $('.select-class').hide();
    //loop through the tags in your predefined rules, and show those elements
    $.each(rules[target], function(index, value) {
        $(value).show();
    });
});