根据我的选择使用Javascript填写下拉菜单

我有两个下拉菜单首先，我给了员工姓名和第二个职位。我想让我们说我们选择PM和TL的第一个员工，然后第二个下拉应该只显示PM TM，当我们从第二个选择PM时，它只显示那些PM的员工。我也想，如果有可能多来自第一下拉列表中选择根据我的选择使用Javascript填写下拉菜单

<select> 
<!--This is main selectbox.--> 
<option value="">Select</option> 
<option>John</option> 
<option>Brendon</option> 
<option>Davin</option> 
<option>Bobby</option> 
</select> 
<select class="sub"> 
<!--another selectbox for option one.--> 
<option>TL</option> 
<option>PM</option> 
</select> 
<select class="sub"> 
<!--another selectbox for option two.--> 
<option>PM</option> 
<option>TL</option> 
</select> 
<select class="sub"> 
<!--another selectbox for option three.--> 
<option>Developer</option> 

</select> 
<select class="sub"> 
<!--another selectbox for option four.--> 
<option>Developer</option> 

</select>

这里是小提琴演示

http://jsfiddle.net/7CmYj/39/

来源

2015-05-15 Chocolaty Burfi

我建议你使用css类的第一选择的选项来指定第二选择的可选选项。然后，使用jquery将非常简单，当您从一个或其他选择中选择任何一个时，隐藏不匹配的选项。 – bitifet

为了能够在select中选择多个选项，唯一的方法是将“多个”属性添加到它。但是，它会显示为选择列表，而不是下拉列表。如果多选择wo'nt是平常的用例，你可能想要添加/从javascript的这个属性，当某事（如CTRL +点击选择）发生。 – bitifet

@bitifet你可以帮忙请怎么用css或请解释mor –

你可以尝试财产以后就像这个例子

a more structured way to do these actions

http://jsfiddle.net/7CmYj/92

来源

2015-05-15 06:40:22 Tajinder

它只是显示undefined什么你选择 –

现在检查https://jsfiddle.net/7CmYj/92/ – Tajinder

这只是附加列表。如果任何机构是开发人员，它只显示开发人员列表追加选择第一个 –

肮脏且无用STED。但。尽管可能的拼写错误，应该工作：

<select id="employee"> 
    <option value="">Select</option> 
    <option class="tl">John</option> 
    <option class="pm">Brendon</option> 
    <option class="tl pm">Davin</option> 
    <option class="pm dev">Bobby</option> 
</select> 

<select id="designation"> 
    <option value="">Select</option> 
    <option value="tl">TL</option> 
    <option value="pm">PM</option> 
    <option value="dev">Developer</option> 
</select> 

<script> 
    $(function automate(){ 
      var empl = $("select#employee"); 
      var emplOpts = $("option", empl); 
      var des = $("select#designation"); 
      var desOpts = $("option", des); 

      empl.on("change", function(){ 
       var me = $(this); 
       desOpts.each(function(){ 
        var currOpt = $(this); 
        if(me.hasClass(currOpt.attr("value"))) { 
         currOpt.show(); 
        } else { 
         currOpt.hide(); 
        }; 
       }); 
      }); 

      des.on("change", function(){ 
       var v = des.val(); 
       if (! v.length) { 
        emplOpts.show(); 
       } else { 
        emplOpts.each(function(){ 
         var me=$(this); 
         if (me.hasClass(v)) { 
          me.show(); 
         } else { 
          me.hide(); 
         }; 
        }); 
       }; 
      }); 

    });  
</script>

来源

2015-05-15 07:21:34 bitifet

根据我的选择使用Javascript填写下拉菜单

回答

相关问题