jQuery Multiple Select Filter :first

Question

I previously posted a script to dynamically filter my select menus (http://stackoverflow.com/questions/9516736/why-does-my-jquery-filter-only-work-once-on-this-select-element)

Now I'm having a bit of a problem.

I'm trying to allow the user to:

Select a Colour
Which then displays the Size options, relating to that colour in another Select Menu
BUT also display the FIRST option value (from the Size Select Menu) somewhere else on the page every time you change a colour.

This is the script I have:

    var $options= $('#product-multiple-2 option');
    $("#product-multiple-1").change(function(){
        // Change Image
        var pImage3 = "";
        $("#product-multiple-1 option:selected").each(function () {
            pImage3 = $(this).attr("data-product-image"); + " ";
            $(".product-code").html('');
            $("#product-multiple-container").fadeOut();
        });
        $("#slideshow-image").attr("src", pImage3);
        // Display Options
        $("#product-multiple-container").fadeIn();
        var matches = $options.filter('.'+$(this).val()).clone();
        $("#product-multiple-2").html(matches);
    });

And this is the HTML

            <p class="product-code"></p>
            <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>

Note from my HTML, I have a class called "product-code" this is where I want to place the Value from the Size options.

The problem im having, is if I use the :first selector. It throws me the first option from the list of options that were there previously. Not when they have been updated.

Could you please stick it in jsfiddle.net so we can have a play. Cheers. — Deadlykipper
– Deadlykipper, Commented Mar 21, 2012 at 11:58

Joel Lundberg · Accepted Answer · 2012-03-21 12:11:13Z

1

Wouldn't putting this at the end of the change handler do the trick?

$(".product-code").html($("#product-multiple-2 option:selected").val());

answered Mar 21, 2012 at 12:11

Joel Lundberg

9165 silver badges6 bronze badges

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

1 Comment

Jason Mayo Over a year ago

Spot on, this worked. Why did i not think of this?! So simple. I did need to make sure i placed it AFTER it had filtered the options though, like below:

Jason Mayo · Accepted Answer · 2012-03-22 22:04:06Z

            var $options= $('#product-multiple-2 option');
            $("#product-multiple-1").change(function(){
                // Change Image
                var pImage3 = "";
                $("#product-multiple-1 option:selected").each(function () {
                    pImage3 = $(this).attr("data-product-image"); + " ";
                    $(".product-code").html('');
                    $(".product-multiple-container").fadeOut();
                });
                $("#slideshow-image").attr("src", pImage3);
                // Display Options
                $(".product-multiple-container").fadeIn();
                var matches = $options.filter('.'+$(this).val()).clone();
                $("#product-multiple-2").html(matches);
                $(".product-code").html($("#product-multiple-2 option:selected").val());
                $(".product-price").html($("#product-multiple-2 option:selected").attr("data-product-price"));
            });

Collectives™ on Stack Overflow

jQuery Multiple Select Filter :first

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related