如果下拉选项不可用，如何隐藏它? [英] How to hide dropdown option if it is not available?

问题描述

我有三个下拉菜单.假设有M/Grey"的组合但不是M/Red"在 name=id" 下拉列表中.如果我选择M"在第一个 .variant 下拉菜单中，Red"选项不应显示在第二个 .variant 下拉列表中.

I have three dropdowns. Suppose there is the combination of "M / Grey" but not "M / Red" in the name="id" dropdown. If I select "M" in the first .variant dropdown the "Red" option should not be shown in the second .variant dropdown.

$(document).ready(function () {
$('.variant').change(function(){    
 var options = $(this).find('.variant').children(":selected").get().map(function(el) {
  return el.value
 }).join(" / ");
 $('select[name="id"] option:contains(' + options + ')').prop('selected', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form action="#" method="post">
  <select class="variant">
   <option value="S">S</option>
   <option value="M">M</option>
   <option value="L">L</option>
  </select>
  <select class="variant">
   <option value="Grey">Grey</option>
   <option value="Red">Red</option>
   <option value="White">White</option>
  </select>
  <br>
  <select name="id">
   <option value="M / Grey">M / Grey</option>
   <option value="L / Grey">L / Grey</option>
   <option value="S / Red">S / Red</option>
   <option value="L / Red">L / Red</option>
   <option value="M / White">M / White</option>
   <option value="L / White">L / White</option>
   </select>
</form>

推荐答案

首先:您应该为每个选择添加一个占位符，如空的 option.否则，如果您选择了预选值(此处为 S 和 Grey)，则无法触发 change 事件.

First: You should add to each select a placeholder like an empty option. Otherwise you couldn't trigger the change event if you select a preselected value (here S and Grey).

要更新另一个 select.variant，您必须将其值(与所选值结合)与 select[name=id"].

To update the other select.variant you have to compare its values (combined with the chosen value) with the values of the select[name="id"].

您可以使用多种解决方案来实现这一点，例如数据属性、值字符串或类.我将类用于以下解决方案.

You could achieve this with multiple solutions, for example data-attributes, the value strings or classes. I used classes for the following solution.

<option class="m grey" value="M / Grey">M / Grey</option>

因此您可以简单地检查是否存在具有可疑类的选项.

So you can simply check if there is an option that has the questionable class.

if (!$('option').is('.' + val + '.' + color_val)) {...}

在 change 处理程序的开头，您必须重置"其他 select.variant 的选项(删除所有禁用的属性).

At the beginning of the change handler you have to "reset" the options of the other select.variant (remove all disabled attributes).

工作示例:

$(document).ready(function() {
  $('.variant').change(function() {
    const val = this.value.toLowerCase();
    const variant_type = this.className.replace('variant', '').trim();
    
    $('.variant:not(.' + variant_type + ') option').attr('disabled', false);
    $('.variant:not(.' + variant_type + ') option').each(function() {
      const other_val = this.value.toLowerCase();

      if (!$('option').is('.' + other_val + '.' + val)) {
        this.disabled = true;
      }
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<form action="#" method="post">
  <select class="variant size">
    <option></option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
  </select>
  <select class="variant color">
    <option></option>
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select name="id">
    <option></option>
    <option class="m grey" value="M / Grey">M / Grey</option>
    <option class="l grey" value="L / Grey">L / Grey</option>
    <option class="s red" value="S / Red">S / Red</option>
    <option class="l red" value="L / Red">L / Red</option>
    <option class="m white" value="M / White">M / White</option>
    <option class="l white" value="L / White">L / White</option>
    <option class="xl red" value="XL / Red">XL / Red</option>
  </select>
</form>

如果你想使用数据属性，你必须稍微修改一下函数.select.variant 得到一个 data-type 属性而不是一个额外的类.例如:

If you want to use data-attributes you have to modify the function a slightly bit. The select.variant get instead of an additional class a data-type attribute. For example:

<select class="variant" data-type="size">

组合示例:(数据属性和类)

$(document).ready(function() {
  $('.variant').change(function() {
    const val = this.value.toLowerCase();
    const variant_type = this.dataset.type;

    $('.variant:not([data-type="' + variant_type + '"]) option').attr('disabled', false);
    $('.variant:not([data-type="' + variant_type + '"]) option').each(function() {
      const other_val = this.value.toLowerCase();

      if (!$('option').is('.' + other_val + '.' + val)) {
        this.disabled = true;
      }
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<form action="#" method="post">
  <select class="variant" data-type="size">
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
  </select>
  <select class="variant" data-type="color">
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select name="id">
    <option class="m grey" value="M / Grey">M / Grey</option>
    <option class="l grey" value="L / Grey">L / Grey</option>
    <option class="s red" value="S / Red">S / Red</option>
    <option class="l red" value="L / Red">L / Red</option>
    <option class="m white" value="M / White">M / White</option>
    <option class="l white" value="L / White">L / White</option>
    <option class="xl red" value="XL / Red">XL / Red</option>
  </select>
</form>

对于具有 data-attributes 的解决方案，只有 select[name=id"] 获得两个数据属性而不是两个类，每个可能的一个data-type-value - 在这个例子中:data-size 和 data-color.例如:

For a solution with data-attributes only the select[name="id"] gets instead of two classes two data-attributes, one for each possible data-type-value - in this example: data-size and data-color. For example:

<option data-size="S" data-color="Red" value="S / Red">S / Red</option>

要获取数据值，您可以使用 dataset 关键字.要选择一个元素，您可以使用属性选择器.例如:

To get the data-values you can use the dataset keyword. To select an element you can use attribute-selectors. For example:

const variant_type = this.dataset.type;

$('.variant:not([data-type="' + variant_type + '"])')

使用 select.variant 中的 data-type，您可以定义 select[name=id"] 您要选择.例如:

With the data-type from the select.variant you could define which data-attribute of select[name="id"] you want to select. For example:

$('[data-' + other_type + '="' + other_val + '"]')

工作示例:

$(document).ready(function() {
  
  $('.variant').change(function() {
    const val = this.value;
    const variant_type = this.dataset.type;
    const other_type = $('.variant:not([data-type="' + variant_type + '"])')[0].dataset.type;

    $('.variant:not([data-type="' + variant_type + '"]) option').attr('disabled', false);
    $('.variant:not([data-type="' + variant_type + '"]) option').each(function() {
      const other_val = this.value;

      if (!$('option').is('[data-' + variant_type + '="' + val + 
        '"][data-' + other_type + '="' + other_val + '"]')) {
        this.disabled = true;
      }
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<form action="#" method="post">
  <select class="variant" data-type="size">
    <option></option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
  </select>
  <select class="variant" data-type="color">
    <option></option>
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select name="id">
    <option></option>
    <option data-size="M" data-color="Grey" value="M / Grey">M / Grey</option>
    <option data-size="L" data-color="Grey" value="L / Grey">L / Grey</option>
    <option data-size="S" data-color="Red" value="S / Red">S / Red</option>
    <option data-size="L" data-color="Red" value="L / Red">L / Red</option>
    <option data-size="M" data-color="White" value="M / White">M / White</option>
    <option data-size="L" data-color="White" value="L / White">L / White</option>
    <option data-size="XL" data-color="Red" value="XL / Red">XL / Red</option>
  </select>
</form>

如果您想在选择两个 select.variant 时自动更新第三个选择，您可以定义一个数据对象.例如:

If you want to auto update the third select when both select.variant are chosen you could define a data object. For example:

let selected = {};

每次调用 change 处理程序时，您将使用 data-type 和值更新对象(向对象添加新条目或覆盖现有条目)):

With each call of the change handler you would update the object with the data-type and the value (add a new entry to the object or overwrite an existing one):

selected[variant_type] = val;

之后，您将更新第三个 select(将 selected 属性添加到拟合选项)，但前提是两个 select.variant被选中，这意味着两者都在数据对象中获得了一个条目:

After that you would update the third select (add the selected attribute to the fitting option), but only if both select.variant were chosen, which means that both got an entry in the data object:

if (selected[variant_type] && selected[other_type]) {...}

工作示例:

$(document).ready(function() {
  let selected = {};
  
  $('.variant').change(function() {
    const val = this.value;
    const variant_type = this.dataset.type;
    const other_type = $('.variant:not([data-type="' + variant_type + '"])')[0].dataset.type;

    selected[variant_type] = val;

    $('.variant:not([data-type="' + variant_type + '"]) option').attr('disabled', false);
    $('.variant:not([data-type="' + variant_type + '"]) option').each(function() {
      const other_val = this.value;

      if (!$('option').is('[data-' + variant_type + '="' + val + 
        '"][data-' + other_type + '="' + other_val + '"]')) {
        this.disabled = true;
      }
    });

    if (selected[variant_type] && selected[other_type]) {
      $('option[data-' + variant_type + '="' + selected[variant_type] + 
        '"][data-' + other_type + '="' + selected[other_type] + '"]'
        )[0].selected = true;
    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<form action="#" method="post">
  <select class="variant" data-type="size">
    <option></option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
  </select>
  <select class="variant" data-type="color">
    <option></option>
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select name="id">
    <option></option>
    <option data-size="M" data-color="Grey" value="M / Grey">M / Grey</option>
    <option data-size="L" data-color="Grey" value="L / Grey">L / Grey</option>
    <option data-size="S" data-color="Red" value="S / Red">S / Red</option>
    <option data-size="L" data-color="Red" value="L / Red">L / Red</option>
    <option data-size="M" data-color="White" value="M / White">M / White</option>
    <option data-size="L" data-color="White" value="L / White">L / White</option>
    <option data-size="XL" data-color="Red" value="XL / Red">XL / Red</option>
  </select>
</form>

这篇关于如果下拉选项不可用，如何隐藏它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！