jquery - chain 2 dropdown lists with javascript - Stack Overflow

admin管理员组

文章数量:1406312

i want to have 2 dropdown menu's chained to each other so the 2nd dropdown only show options with the value that match 1st dropdown.

here is my 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>

i have tried this , but i can't get it to work :/

UPDATE:

with the plugin my code was:

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

i want to have 2 dropdown menu's chained to each other so the 2nd dropdown only show options with the value that match 1st dropdown.

here is my 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>

i have tried this http://appelsiini/2010/jquery-chained-selects, but i can't get it to work :/

UPDATE:

with the plugin my code was:

<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

Share Improve this question Follow edited Mar 28, 2014 at 12:42 Sam Tyson 4,63444 gold badges2828 silver badges3535 bronze badges asked Mar 26, 2014 at 12:47 user3464204user3464204 2311 silver badge44 bronze badges 2

• why not show us what you had with the plugin? and maybe we can answer why it wasn't working for you... – user3334690 Commented Mar 26, 2014 at 12:54
• missing quotes on the class properties in the second list – Sam Tyson Commented Mar 26, 2014 at 13:05

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

You need to apply the class=value for the second <select> values . Check 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>

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


});

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

Demo:

http://jsfiddle/g5BCL/

Can you try this:

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

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

1000% working

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


});

It can help you.

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

});

本文标签： jquerychain 2 dropdown lists with javascriptStack Overflow