Question

我希望有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>

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＆GT;

<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的＆GT;

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

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


});

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

Answer 4

你可以试试这个：

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

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

Answer 5

1000％工作

HTML＆GT;

<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的＆GT;

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

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

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

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


});

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

});

使用javascript链2下拉列表

6 个答案: