jQuery 多选过滤器：first

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，我有一个名为“产品代码”的类，这是我要放置大小选项中的值的位置。

我遇到的问题是，如果我使用:first 选择器。它从以前的选项列表中向我抛出了第一个选项。不是在它们更新时。

Answer 1

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

Answer 2

将其放在更改处理程序的末尾不会起到作用吗？

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