Question

我有16个字段需要按州排序。最初，我这样做是为了有四个不同的div，因为人们可以选择四种不同的状态。

但是，我遇到了电子邮件问题，而不是正确的人，因为16个字段是人们可以选择的代理商，如果他们被选中，那些代理商需要向他们发送电子邮件。

我一直在寻找显示和隐藏不同div的多种解决方案，但如何在单个子下拉菜单中隐藏或显示选项？

父下拉菜单

州1
州2
State 3
State 4

代理下拉菜单

代理1
代理人2
代理3
Etc（一直到代理商16）

如何使用当用户选择状态1时，它只显示代理下拉菜单中的几个选项？我能找到的唯一解决方案是将子菜单拆分为不同的div。我们使用的是联系表格7，人们可以看到的唯一内容是名称，但电子邮件已附加，当有人选择时，这些代理商必须收到电子邮件。

Answer 1

您可以在选择下拉列表中触发更改状态，并在第二个

中隐藏选项

HTML

<select id="s1">
    <option disabled selected>pick an option</option> 
    <option data-id="1">option 1</option>    
    <option data-id="2">option 2</option>  
</select>

<select id="s2">
    <option class="1">sub option 1</option>   
    <option class="1">sub option 2</option> 
    <option class="1">sub option 3</option> 
    <option class="1">sub option 4</option> 

    <option class="2">sub option 5</option> 
    <option class="2">sub option 6</option> 
    <option class="2">sub option 7</option> 
    <option class="2">sub option 8</option> 
</select>

使用Javascript / Jquery的

$("#s1").on("change", function(){
    var id = $("#s1 :selected").data("id");
    if(id == 1){
        $(".1").show();
        $(".2").hide();
    }
    if(id == 2){
        $(".1").hide();
        $(".2").show();
    }
});

看看我创建的fiddle

更新：

在回复您的评论时，您可以通过Jquery添加类，如下所示：

var count = 0;
   $("#s2 option").each(function(){
       if(count < 4){
           $(this).addClass("1");
       }
       else $(this).addClass("2");
       count++;
});

这只是使用一个简单的计数器来添加＆＃34; 1＆＃34;分类到选项的前半部分然后切换到＆＃34; 2＆＃34;下半场上课。

Answer 2

HTML：

<select onchange="changeValues()" id="main-dd">
    <option value="0">State 1</option>
    <option value="1">State 2</option>
    <option value="2">State 3</option>
    <option value="3">State 4</option>
</select>

<select id="agent-dd"></select>

使用Javascript：

 var AgentDDValues = [
                        ['Agent 1','Agent 2'],
                        ['Agent 3'],
                        ['Agent 4'],['Agent 5'],
                        ['Agent 6'],['Agent 7'],['Agent 8']
                    ];

  function changeValues(){
      var e = document.getElementById("main-dd");
      var selVal = e.options[e.selectedIndex].value;
      $("#agent-dd").empty();

      for(var i=0;i<AgentDDValues[selVal].length;i++){
       $("#agent-dd").append('<option>'+AgentDDValues[selVal][i]+'</option>');
    }

}

根据另一个下拉列表显示或显示下拉选项

2 个答案: