为什么我的jQuery过滤器只能在这个select元素上工作一次？ [英] Why does my jQuery filter only work once on this select element?
问题描述
我试图根据用户在选择表单中选择的内容来筛选结果。这里是我的HTML：
< li>
颜色选项
< option>选择选项< / option>
< option value =Red>红色< / option>
< option value =Green>绿色< / option>
< option value =Blue>蓝色< / option>
< / select>
< / li>
< li>
大小选项
< select name =item_options [cf_product_option_size]id =product-multiple-2>
< option>选择选项< / option>
< option value =75643class =Red> 5ml - £1.00< / option>
< option value =765432class =Red> 10ml - £2.00< / option>
< option value =867564534class =Red> 15ml - £3.00< / option>
< option value =5434class =Red> 20ml - £4.00< / option>
< option value =6453234class =Green> 5ml - £1.00< / option>
< option value =45256536class =Green> 10ml - £2.00< / option>
< option value =52454class =Green> 15ml - £3.00< / option>
< option value =6543754class =Blue> 5ml - £1.00< / option>
< option value =4316243class =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;
}）;
会发生什么，是当我选择颜色选项时，它会将大小选项下拉。当我选择第一个颜色选项时，这似乎工作，但如果我选择另一种颜色选项，它什么也不做。
安慰。它似乎运行一次变量，但是当我尝试选择另一个选项时，该变量是空的，并且在控制台中它只显示 [] 任何帮助都不错：）解决方案
问题是，当您将选项替换为第一个时间，第二种选择中的唯一选项具有第一种颜色的类别，而所有其他颜色类别都消失了。如果我先点击红色，再点红色班。现在点击绿色，它不会返回任何匹配，所以select会被清空。
一个简单的修复会缓存这些选项的克隆。
var $ options = $（'＃product-multiple-2 option'）;
$（＃product-multiple-1）。change（function（）{
var matches = $ options.filter（'。'+ $（this）.val（））。clone ）;
$（＃product-multiple-2）。html（matches）;
}）;
现在您可以根据需要经常返回井中。试图隐藏选项在IE 中不起作用
I'm trying to filter results based on what a user selects in a select form. Here is my 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>
And the 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;
});
What should happen, is when I choose a colour option, it changes the size options drop down. This seems to work when I choose the first colour option, but then if I choose another colour option, it doesn't do anything.
I inspected it and looked at the console. It seems to run the variable once, but then when I try select another option, the variable is blank and in console it just displays []
Any help would be good :)
The problem is, when you replace the options the first time , the only options in the second select have the class of the first color and all the other color classes are gone. If I click on RED first, get red class in second. Now click on GREEN and it returns no match so the select gets emptied.
A simple fix would be cache a clone of the options.
var $options= $('#product-multiple-2 option');
$("#product-multiple-1").change(function(){
var matches = $options.filter('.'+$(this).val()).clone();
$("#product-multiple-2").html(matches);
});
Now you can go back to the well as often as needed . Trying to hide options does not work in IE
这篇关于为什么我的jQuery过滤器只能在这个select元素上工作一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
