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

我试图根据用户在选择表单中选择的内容过滤结果。这是我的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>

应该发生的是，当我选择颜色选项时，它会更改“大小选项”下拉列表。当我选择第一个颜色选项时，这似乎起作用，但如果我选择另一个颜色选项，它不会起任何作用

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

[]

---

任何帮助都很好：）

当您执行第一个

empty（）

时，您不再有任何其他选项，只有红色选项。
因此，例如，当您第一次运行它时，在select1上选择红色，您只会在select 2-FOREVER中获得红色选项
当您第二次运行时，例如绿色，select2中没有绿色选项，因此您会得到一个空节点列表。
您应该使用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;
    });

---

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

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

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

相反，您可以隐藏所有内容：（大约）

---

这是因为您正在删除不匹配的项目，因此当您选择其他颜色时，该颜色的项目将消失

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

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

---

修复了“选择选项”不中断的问题。

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

一个简单的修复方法是缓存选项的克隆

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

---

现在你可以根据需要经常回到井里。试图隐藏选项在IE中不起作用。发生这种情况的原因是，您正在从第二个select标记中删除所有选项，以便显示具有与第一个select值匹配的类的选项

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

您可以在变量中保留选项元素的副本，然后获取所需的元素，如下所示：

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

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

您可以禁用第二个选项中不可用的选项，如下所示：

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

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

---

jsFiddle here:hide（）和option标记在IEOk中是无效的，这是有意义的，但当我运行它时，它不起作用？我不知道如何使用此选项隐藏和显示选项元素。这就是隐藏（）和显示（）的作用，更改css显示…在IE中尝试。失败这似乎效果最好。我从未遇到过克隆方法。我会调查的。