将句点添加到选项值并与 JQuery 一起使用

Question

我正在尝试禁用一组下拉菜单（select 框）中的某些项目组合。我有这段代码效果很好，但是我试图将它与在值中使用句点的同位素组合过滤器结合起来，即： value=".filter-apple" 添加句点到这个脚本会阻止它工作。

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

值需要进入4个地方才能起作用： 1.物品的选择价值。 2. 您隐藏的项目的class。和脚本中的两个地方。

只要值没有句点，脚本就可以正常工作。有没有不同的方法来做到这一点？我想知道是否有办法使这个与句点一起工作，或者是否有办法在没有句点的情况下添加第二个值。我试过值="Color,.filter-color"

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

DEMO

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

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

将句点添加到选项值并与 JQuery 一起使用

Adding a period to an option value and using with JQuery

javascript

jquery

html

jquery-isotope