Question

I’m trying to filter results based on what a user selects in a select form. Here is my HTML:

<li>
Colour Options
<select name="item_options[cf_product_option_colour]" id="product-multiple-1">
    <option>Choose Option</option>
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
</li>
<li>
Size Options
<select name="item_options[cf_product_option_size]" id="product-multiple-2">
    <option>Choose Option</option>
    <option value="75643" class="Red">5ml - £1.00</option>
    <option value="765432" class="Red">10ml - £2.00</option>
    <option value="867564534" class="Red">15ml - £3.00</option>
    <option value="5434" class="Red">20ml - £4.00</option>
    <option value="6453234" class="Green">5ml - £1.00</option>
    <option value="45256536" class="Green">10ml - £2.00</option>
    <option value="52454" class="Green">15ml - £3.00</option>
    <option value="6543754" class="Blue">5ml - £1.00</option>
    <option value="4316243" class="Blue">10ml - £2.00</option>
</select>
</li>

And the jQuery:

$("#product-multiple-1").change(function(){
    var matches = $("#product-multiple-2 > option." + $(this).val());
    $("#product-multiple-2").empty().html(matches);
    console.log(matches);
    return matches;
});

What should happen, is when I choose a colour option, it changes the size options drop down. This seems to work when I choose the first colour option, but then if I choose another colour option, it doesn’t do anything.

I inspected it and looked at the console. It seems to run the variable once, but then when I try select another option, the variable is blank and in console it just displays []

Any help would be good 🙂

Answer 1

The problem is, when you replace the options the first time , the only options in the second select have the class of the first color and all the other color classes are gone. If I click on RED first, get red class in second. Now click on GREEN and it returns no match so the select gets emptied.

A simple fix would be cache a clone of the options.

var $options= $('#product-multiple-2 option');
$("#product-multiple-1").change(function(){
    var matches = $options.filter('.'+$(this).val()).clone();
    $("#product-multiple-2").html(matches);
});

Now you can go back to the well as often as needed . Trying to hide options does not work in IE