0

I want to create a chained dropdown for selectbox.

HTML:

<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Category </option>
  <option value="men"> Mens Suits </option>
  <option value="women"> Womens Suits </option>
  <option value="children"> Children Suits </option>
</select>

<select class="color" id="select_2" name="color">
  <option selected="selected" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</select>

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="36">36</option>
  <option value="38">38</option>
  <option value="40">40</option>
  <!-- Womens Sizes Below -->
  <option value="30">30</option>
  <option value="29">29</option>
  <option value="28">28</option>
  <!-- Children Sizes Below -->
  <option value="12">12</option>
  <option value="11">11</option>
  <option value="10">10</option>
</select>

Js:

$(document).ready(function() {
    var sizes = {
        men: [36,38,40],
        women: [30,29,28],
        children: [12,11,10]
    }
    $('.product').change(function() {
        var value = $(this).val();
        addToList(sizes[value]);
    });
    function addToList(sizes) {
        removeOptions();
        for (var i in sizes) {
            var option = '<option value="'+i+'">'+sizes[i]+'</option>';
            $('.size').append(option)
        }
    }

    function removeOptions() {
         $('.size option').each(function(){
            if ($(this).val().length > 0){
                $(this).remove();
            }
        }); 
    }
});

What i want:

There is three select boxes like select box 1 , select box 2 and select box 3 . when i click on select box 1 then select box 2 value will change according the value selected in select box 1 and when i click on select box 2 then select box 3 value will change according the value selected in select box 2 ..

Problem

I want three chained drop down not two. eg: country , state and city.. when one country selected then state change according to country and city change according to state .

I am able to create for two select box not for three. pls tell me where I am lacking.

Above coding is an eg. actually i want it for country , state and city options.

Hope you understand my question.

sonalgoyal
  • 359
  • 1
  • 6
  • 19
  • Could you provide a [JS Fiddle](http://www.jsfiddle.net) so I can compare a result to what you're talking about? **Edit** So you want the right-most dropdowns to be limited in their selection based on the initial? [jsfiddle](http://jsfiddle.net/7LTyn/)... why would the color change? Or are you just looking for proof of concept? – Nicholas Hazel Jan 31 '14 at 05:14
  • 2
    Your code lacks information that you've provided in your question. `I am able to create for two select box not for three. ` actually there is nothing you have done like that. Give a precise question – Praveen Jan 31 '14 at 05:22
  • http://jsfiddle.net/mcSH5/ – sonalgoyal Jan 31 '14 at 05:26

0 Answers0