使用 javascript 鏈接 2 個下拉列表

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

您需要為第二個<select> values 應用class=value 。 檢查工作演示

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

查詢>

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

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


});

Answer 3

網址：

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

查詢：

  $("#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>

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

查詢>

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

});