向选项值添加一个句点并与 JQuery 一起使用

Question

我正在尝试禁用一组下拉列表(选择框)中的某些项目组合。我有这段运行良好的代码，但是我正在尝试将其与同位素的组合过滤器结合使用，该过滤器在值中使用句点，即：value=".filter-apple" 向此脚本添加句点会阻止它工作。

我试图使用"\"来转义脚本中的句点，但没有效果，并且还将其放入 [".filter-apple"] 中，这似乎可以阻止语法错误，但仍然不起作用。

该值需要进入 4 个工作地点： 1. 项目的期权价值。 2. 您要隐藏的项目的类别。 和剧本中的两个地方。

只要值没有句点，脚本就可以正常工作。有没有不同的方法可以做到这一点？我想知道是否有办法使它与句点一起工作，或者是否有办法在没有句点的情况下添加第二个值。我尝试了值="颜色，.过滤器颜色">

$('select[name*="select"]').change(function() {
var selectedOptions = $(this).find('option:selected');
$('select option').removeAttr('disabled');
selectedOptions.each(function() {        
var value = this.value;
console.log(value);
if (value !== ''){           
var id = $(this).parent('select[name*="select"]').attr('id');
var options = $('select:not(#' + id + ') option[value=' + value + ']');
if (value == "Apple") {
	options = $.merge(options,$('select:not(#' + id + ') option.Apple'));
}
if (value == "Pear") {
	options = $.merge(options,$('select:not(#' + id + ') option.Pear'));
}
if (value == "Strawberry") {
	options = $.merge(options,$('select:not(#' + id + ') option.Strawberry'));
}
//Sizes
if (value == "Small") {
	options = $.merge(options,$('select:not(#' + id + ') option.Small'));
}
if (value == "Medium") {
	options = $.merge(options,$('select:not(#' + id + ') option.Medium'));
}
if (value == "Large") {
	options = $.merge(options,$('select:not(#' + id + ') option.Large'));
}
// Colors
if (value == "Red") {
	options = $.merge(options,$('select:not(#' + id + ') option.Red'));
}
if (value == "Green") {
	options = $.merge(options,$('select:not(#' + id + ') option.Green'));
}
if (value == "Yellow") {
	options = $.merge(options,$('select:not(#' + id + ') option.Yellow'));
}
console.dir(options);
options.attr('disabled', 'true');
}

});
});	
$(function () {
$("#btnReset").bind("click", function () {
$("#select-type")[0].selectedIndex = 0;
$("#select-size")[0].selectedIndex = 0;
$("#select-color")[0].selectedIndex = 0;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
<select name="select-type" id="select-type">
<option value="">All</option>
<option class="Small Medium Red Yellow" value="Apple">Apple</option>
<option class="Small Large Red Green" value="Pear">Pear</option>
<option class="Medium Large Green Yellow" value="Strawberry">Strawberry</option>	 
</select>
</div>
<div class="">
<select name="select-size" id="select-size">
<option value="">All</option>
<option class="Apple Pear Green Yellow" value="Small">Small</option>
<option class="Apple Strawberry Red Green" value="Medium">Medium</option>
<option class="Pear Strawberry Red Yellow" value="Large">Large</option>	 
</select>
</div>
<div class="">
<select name="select-color" id="select-color">
<option value="">All</option>
<option class="Apple Pear Medium Large" value="Red">Red</option>
<option class="Pear Strawberry Small Medium" value="Green">Green</option>
<option class="Apple Strawberry Small Large" value="Yellow">Yellow</option>		 
</select>
</div>
<input type="button" id="btnReset" value="Reset" />

任何帮助将不胜感激。

Answer 1

你所拥有的内容过于重复，有点过于复杂，可以大大简化为：

$(function() {
// store reference to all <select> to be used in various places
var $selects = $('select[name*="select"]');
$selects.change(function(e) {
// get value of current `<select>` that was changed
var selectedVal = this.value;
// "this" is the current `<select>`
// use not() to filter out current `<select>`
// use `hasClass()` instead of manually concatenating class selector
$selects.not(this).find('option').prop('disabled', function() {
// will be false if this option value or class doesn't match selected value
// otherwise if one condition true it will get disabled
return this.value === selectedVal || $(this).hasClass(selectedVal )
});    
});
$("#btnReset").bind("click", function() {
// set empty value on all `<select>` and enable all options
$selects.val('').find('option').prop('disabled', false)
});
});

演示

请注意，非多<select>值与所选选项值相同，您可以使用prop(propName, function)和not()来定位和启用/禁用其他<select>选项，只需几行代码。

您也可以使用hasClass()而不是手动创建类选择器