CODEWITHSUNDEEP
htmljqueryhtml-select
Craig MacNeil
Craig MacNeil

Reputation: 1

Two selects, If you choose an option in one, some options in other are disabled

I'm working on a website with a "size" select and a "color" select.

to give an example

<select type="text" class="item_color item-dropdown">
 <option>blue</option>
 <option>red</option>
 <option>green</option>
</select>

<select type="text" class="item_size item-dropdown">
 <option>small</option>
 <option>medium</option>
 <option>large</option>
</select>

I would like it so that, for example, if option red is selected, size medium and large are disabled ect.

Upvotes: 0

Views: 63

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

One possible solution could be

<select type="text" class="item_color item-dropdown">
    <option>blue</option>
    <option>red</option>
    <option>green</option>
</select>
<select type="text" class="item_size item-dropdown"></select>

then

var map = {
    blue: ['small', 'medium'],
    red: ['small'],
    green: ['large', 'medium']
}

$('.item_color').change(function () {
    var sizes = map[this.value];
    $('.item_size').html(function () {
        return $.map(sizes, function (val) {
            return '<option>' + val + '</option>';
        })
    });
}).change();

Demo: Fiddle

Upvotes: 1

Related Questions