为什么我的 jQuery 过滤器只在这个选择元素上工作一次？

Question

我正在尝试根据用户在选择表单中选择的内容来过滤结果。这是我的 HTML：

<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>

还有 jQuery：

$("#product-multiple-1").change(function(){
    var matches = $("#product-multiple-2 > option." + $(this).val());
    $("#product-multiple-2").empty().html(matches);
    console.log(matches);
    return matches;
});

应该发生的是，当我选择颜色选项时，它会更改尺寸选项下拉菜单。当我选择第一个颜色选项时，这似乎有效，但是如果我选择另一种颜色选项，它什么也做不了。

我检查了它并查看了控制台。它似乎运行了一次变量，但是当我尝试选择另一个选项时，变量是空白的，在控制台中它只显示[]

任何帮助都会很好:)

Answer 1

问题是，当您第一次替换选项时，第二次选择中唯一的选项具有第一种颜色的类，而所有其他颜色类都消失了。如果我先点击RED，第二次获得红色等级。现在点击绿色，它返回不匹配，所以选择被清空。

一个简单的解决方法是缓存选项的克隆。

var $options= $('#product-multiple-2 option');
$("#product-multiple-1").change(function(){
    var matches = $options.filter('.'+$(this).val()).clone();
    $("#product-multiple-2").html(matches);
});

现在您可以根据需要随时返回井中。尝试隐藏选项在 IE 中不起作用

Answer 2

您正在删除与所选选项值具有不同类的所有元素：

$("#product-multiple-2").empty().html(matches); 

该行首先有效地删除所有选项，然后添加之前匹配的选项。

您可以改为隐藏所有内容：（大约）

$("#product-multiple-2 option").hide();
matches.show();

Answer 3

当您执行第一个empty() 时，您不再有任何其他选项，只有红色选项。
因此，例如，当您第一次运行它时，在 select1 上选择红色，您只会在选择 2 中获得红色选项 - FOREVER！
当您第二次运行时，例如 Green，select2 中没有 Green 选项，因此您得到一个空节点列表。
你应该使用 jQuery 的 hide() 和 show()，像这样：

$("#product-multiple-1").change(function(){
        var matches = $("#product-multiple-2 option." + $(this).val());
        $("#product-multiple-2 option").not('.'+ $(this).val()).css('display', 'none');
        matches.css('display', 'block'))
        return matches;
    });

Answer 4

这是因为您要删除不匹配的项目，所以当您选择不同颜色时，该颜色的项目会消失。

保存原件并重新加载它们，如下所示：

var productMultiple2 = $("#product-multiple-2");
productMultiple2.data('originalOptions', productMultiple2.html());
$("#product-multiple-1").change(function(){   
    var val = $(this).val();
    productMultiple2.html(productMultiple2.data('originalOptions'));
    if (val !== "Choose Option") {  
        $("#product-multiple-2 > option").filter(function() {
            return !$(this).is("." + val) && $(this).val() !== "Choose Option";
        }).remove();
    }
});​

http://jsfiddle.net/uazKL/5/

修复了不与“选择选项”中断

Answer 5

发生这种情况的原因是因为您要从第二个选择标记中删除所有选项，以便显示具有与第一个选择的值匹配的类的选项。

您可以做两件事（也许更多？）：

1. 您可以在变量中保留选项元素的副本，然后像这样抓取您想要的元素：

   var $options = $("#product-multiple-2 > option");
   $("#product-multiple-1").change(function(){
       var $matches = $options.filter("." + $(this).val());
       $("#product-multiple-2").empty().html($matches);
       console.log($matches);
   });
   

2. 您可以像这样禁用第二个选择中不可用的选项：

   $("#product-multiple-1").change(function(){
       $("#product-multiple-2 > option").each(function(index, elem) {
           if ($(elem).is("." + $(this).val())) {
               elem.disabled = false;
           } else {
               elem.disabled = true;
           }
       });
       console.log($matches);
   });