Issue
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.
Solution
Wouldn't putting this at the end of the change handler do the trick?
$(".product-code").html($("#product-multiple-2 option:selected").val());
Answered By - Joel Lundberg
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.