Фильтр множественного выбора jQuery: первый

Question

Ранее я публиковал скрипт для динамической фильтрации меню выбора (http://stackoverflow.com/questions/9516736/why-does-my-jquery-filter-only-work-once-on-this-select-element)

Теперь у меня возникла небольшая проблема.

Я пытаюсь разрешить пользователю:

1. Выберите цвет
2. , который затем отображает параметры размера, относящиеся к этому цвету в другом меню выбора.
3. НО также отображает значение параметра FIRST (изМеню выбора размера) где-то в другом месте на странице каждый раз, когда вы меняете цвет.

У меня есть такой скрипт:

    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);
    });

А это 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>

Обратите внимание, из моего HTML-кода у меня есть класс с именем "product-code", в который я хочу поместить значение из опций Size.

Проблема, с которой я сталкиваюсь, заключается в том, что если я использую:first селектор. Он выбрасывает мне первый вариант из списка опций, которые были там ранее. Не тогда, когда они были обновлены.

Answer 1

Не поместит ли это в конец обработчик изменений?

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

Answer 2

            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"));
            });