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

Answer 2

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

extra_page.scriptextension

<select name="secondSelect">
if option1 then
      <select1 display=""></select>
      <select2 display=""></select>
      <select3 display=""></select>
      <select4 display="none"></select>
else
      <select1 display="none"></select>
      <select2 display=""></select>
      <select3 display="none"></select>
      <select4 display=""></select>
end 
<select>

extra_page.scriptextension

的结尾

然后在你的主页面中你输入了类似的内容：

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

在额外页面中，您可以更好地控制litte如何填充第二个选择，以及您在数据库中可能包含的选项和类别。

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

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

2 个答案:

extra_page.scriptextension

extra_page.scriptextension