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

我在表格上选择了一个主要类别：

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

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

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

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

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

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

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

---

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

我想说，像这样做：

首先，为所有选择项（除了#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();
    });
});

---

在我看来，作为一名开发人员，您应该使用对不同页面的请求来加载您的选项。我不知道您是否正在使用服务器端脚本，但我希望这样做：

---

额外页面.scriptextension

如果选择1，则
其他的
结束

---

附加页面结束。脚本扩展名 然后在你的主页上你放了这样的东西：

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

<script>

$("mainCat").onchange(function(){
     $(this).load("extra_page.scriptextension")
});
</script>

主要类别1
主要类别2
$（“mainCat”）.onchange（函数（）{
$（this.load（“额外的页面.脚本扩展”）
});

在额外的页面中，您可以更好地控制如何使用数据库中的选项和类别填充second select

---

这只是想法的草稿。。。当然，您应该使用正确的jQuery和javascript语法，以及您使用的服务器端脚本

通过学习如何使用JavaScript更改HTML元素样式，可能会重复开始。这看起来对我来说将是一个，但是我在这里做错了什么。。。jQuery没有包含在您的小提琴中。它正在工作，元素没有显示，因为它们没有内容。在开发人员控制台中查看DOM。谢谢你，我现在已经添加到了我的实际代码中，没有什么乐趣，我已经更新了fiddle。我错过了什么？首先，您的代码需要包装在document.ready函数中，以便在创建元素后可以绑定事件处理程序。其次，由于您现在正在引用元素ID，所以规则数组中的值需要是css ID选择器。