Question

我尝试在一组下拉菜单（选择框）中禁用某些项目组合。我有这个代码非常有效，但我试图将它与同位素的组合过滤器结合使用，这些同位素在值中使用句点，即：value =＆＃34; .filter-apple＆＃34;在此脚本中添加句点会使其停止工作。

我试图使用＆＃34; \＆＃34;来逃避脚本中的句号。没有任何效果，也可以将它放入[＆＃34; .filter-apple＆＃34;]这似乎可以阻止语法错误，但仍然无法正常工作。

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

只要值不具有句点，脚本就可以正常工作。有没有不同的方法来做到这一点？我想知道是否有办法让这个工作与期间或如果有一种方法来添加没有句点的第二个值。我尝试了值=＆＃34;颜色，.filter-color＆＃34;

＆＃13;

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

＆＃13;

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

＆＃13;

任何帮助都将不胜感激。

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)以及not()来定位和启用/禁用其他hasClass() 1}}只有几行代码的选项。

您可以使用代替手动创建类选择器

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

1 个答案: