使用 javascript 链接 2 个下拉列表答案

【问题标题】：chain 2 dropdown lists with javascript使用 javascript 链接 2 个下拉列表
【发布时间】：2014-03-26 12:47:09
【问题描述】：

我想让 2 个下拉菜单相互链接，因此第二个下拉菜单仅显示与第一个下拉菜单匹配的值的选项。

这是我的html

<select class="form-control" id="color">                
    <option value=""> choose options </option>                
    <option value="27">Blomme</option>
    <option value="26">Grøn</option>
    <option value="28">Syren</option>
</select>
<select class="form-control" id="size">             
    <option value=""> choose options </option>
    <option value="27">XL </option>
    <option value="26">L</option>
    <option value="26">L</option>
    <option value="26">L</option>
    <option value="28">S</option>
</select>

我已经尝试过这个http://appelsiini.net/2010/jquery-chained-selects，但我无法让它工作：/

更新：

使用插件我的代码是：

<select class="form-control" id="color">                
    <option value=""> choose options </option>                
    <option value="27">Blomme</option>
    <option value="26">Grøn</option>
    <option value="28">Syren</option>
</select>
<select class="form-control" id="size">             
    <option value=""> choose options </option>
    <option class="27" value="27">XL</option>
    <option class="26" value="26">L</option>
    <option class="26" value="26">L</option>
    <option class="26" value="26">L</option>
    <option class="28" value="28">S</option>
</select>

<script type="text/javascript">
    $('#size').chainedTo('#color');
</script>

【问题讨论】：

为什么不向我们展示您对插件的了解？也许我们可以回答为什么它不适合你......
第二个列表中的类属性缺少引号

标签： javascript jquery html-select

【解决方案1】：

您需要将class=value 应用于第二个<select> 值。查看 Working DEMO

<select class="form-control" id="color">

   <option value="">choose options</option>
    <option value="27">Blomme</option>
    <option value="26">Grøn</option>
    <option value="28">Syren</option>
  </select>
  <select class="form-control" id="size">
    <option value="">choose options</option>
    <option value="27" class="27">XL</option>
    <option value="26" class="26">L</option>
    <option value="26" class="26">L</option>
    <option value="26" class="26">L</option>
    <option value="28" class="28">S</option>
  </select>

【讨论】：

我忘记了 $(function(){ $("#size").chained("#color"); });

【解决方案2】：

HTML>

<select class="form-control" id="color">                
    <option value=""> choose options </option>                
    <option value="27">Blomme</option>
    <option value="26">Grøn</option>
    <option value="28">Syren</option>
</select>
<select class="form-control" id="size">             
    <option value=""> choose options </option>
    <option value="27">XL </option>
    <option value="26">L</option>
    <option value="26">L</option>
    <option value="26">L</option>
    <option value="28">S</option>
</select>

jQuery>

$("#color").change(function(){
    $("#size option").css({"display":"block"});
    var val=$("#color").find(":selected").val();

    $("#size option[value!="+val+"]").css({"display":"none"});


});

【讨论】：

这在 IE 中不起作用，如果您选择第二个下拉菜单并使用键盘上的箭头键，您仍然可以选择未显示的选项。
是的，否则这会更好，因为它不需要插件
我已经写了另一个答案尝试...工作得很好@user3464204

【解决方案3】：

HTML：

 <select class="form-control" id="color">                
        <option value=""> choose options </option>                
        <option value="27">Blomme</option>
        <option value="26">Grøn</option>
        <option value="28">Syren</option>
    </select>
    <select class="form-control" id="size">             
        <option value=""> choose options </option>
        <option value="27" class="27">XL </option>
        <option value="26" class="26">L</option>
        <option value="26" class="26">L</option>
        <option value="26" class="26">L</option>
        <option value="28" class="28">S</option>
    </select>

JQuery:

  $("#size").chained("#color");

演示：

http://jsfiddle.net/g5BCL/

【讨论】：

【解决方案4】：

你能试试这个吗：

$('#color').change(function() {
     var opt1 = this.value;
    $('#size').children('option').each(function () {

      if(this.value != opt1 && this.value != "")
      {
        this.remove();
      }
    });
});

【讨论】：

【解决方案5】：

1000% 正常工作

HTML>

<select class="form-control" id="color">                
    <option value=""> choose options </option>                
    <option value="27">Blomme</option>
    <option value="26">Grøn</option>
    <option value="28">Syren</option>
</select>
<select class="form-control" id="size">             
    <option value=""> choose options </option>
    <option value="27">XL </option>
    <option value="26">L</option>
    <option value="26">L</option>
    <option value="26">L</option>
    <option value="28">S</option>
</select>

jQuery>

$alloption=$("#size").html();
$("#color").change(function(){

     $("#size").html($alloption);

    var val=$("#color").find(":selected").val();

    $("#size option[value!="+val+"]").remove();


});

【讨论】：

【解决方案6】：

它可以帮助你。

$("#color").change(function(){
  var selected_value = $(this).val();
  $('#size option').each(function() {
    var vl = $(this).val();
    if(vl == selected_value){
      $(this).show();
    } else{
      $(this).hide();
    }
 });

});

【讨论】：