Question

我之前发布了一个脚本来动态过滤我的选择菜单（http://stackoverflow.com/questions/9516736/why-does-my-jquery-filter-only-work-once-on-this-select-element）

现在我遇到了一些问题。

我试图让用户：

选择颜色
然后在另一个选择菜单
每次更改颜色时，也会在页面上的其他位置显示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选项中放置Value的地方。

我遇到的问题是，如果我使用: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"));
            });

jQuery Multiple Select Filter：首先

2 个答案: