带有javascript的链表2下拉列表

Question

我希望有两个下拉菜单链接到彼此，所以第二个下拉菜单只显示与第一个下拉菜单值匹配的选项。

这是我的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>

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

Answer 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"});


});

Answer 3

你能试试这个吗？

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

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