chain 2 dropdown lists with javascript

Question

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.net/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>

why not show us what you had with the plugin? and maybe we can answer why it wasn't working for you... — user3334690
– user3334690, Commented Mar 26, 2014 at 12:54

Murali Murugesan · Accepted Answer · 2014-03-26 12:57:54Z

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>

answered Mar 26, 2014 at 12:57

Murali Murugesan

22.6k18 gold badges76 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3464204 Over a year ago

i had forgot the $(function(){ $("#size").chained("#color"); });

Tuhin · Accepted Answer · 2014-03-26 13:02:00Z

1

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


});

answered Mar 26, 2014 at 13:02

Tuhin

3,3932 gold badges18 silver badges28 bronze badges

3 Comments

user3464204 Over a year ago

This doesn't work in IE, and if you select the 2nd dropdown and use arrow key on keyboard you can still choose the options that ain't displayed.

user3464204 Over a year ago

yep otherwise this would be way better because it dont need plugin

Tuhin Over a year ago

I have written another ansewer try...working nice @user3464204

RGS · Accepted Answer · 2014-03-26 12:57:42Z

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.net/g5BCL/

hareesh · Accepted Answer · 2014-03-26 13:27:06Z

0

Can you try this:

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

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

answered Mar 26, 2014 at 13:27

hareesh

537 bronze badges

Comments

Tuhin · Accepted Answer · 2014-03-26 13:27:52Z

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


});

uma · Accepted Answer · 2014-03-26 13:28:02Z

0

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

});

answered Mar 26, 2014 at 13:28

uma

2,97229 silver badges20 bronze badges

Collectives™ on Stack Overflow

chain 2 dropdown lists with javascript

6 Answers 6

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related