代码之家 › 专栏 › 技术社区 › iamab.in

jquery:基于选定值的数组禁用multiple<option>on multiple<select>。

html jquery javascript

iamab.in · 技术社区 · 7 年前

我有一张3(或更多)的表格 <select> 类中的元素 'products-combo' 同样 <option> 价值观。

目标: 禁用特定 <选项> 在每个 <选择> 如果那样的话 <选项> 在任何 <选择> 元素。并重新启用上一个 <选项> 如果选定的选项已更改。

我可以用下面的jquery完成禁用部分。但是如果我试图改变我的选择 <选项> 换了另一个之后 <选择> 元素,然后是上一个选定的 <选项> 无法启用。

在代码片段中重现问题的步骤: 按以下顺序在“选择”框中选择选项。

在第一个选择框中选择一个选项

在第二个选择框中选择一个选项

在第三个选择框中选择一个选项

现在一切正常。

现在更改第一个选择框中的选定选项。

在此之后,单击第二个选择框或第三个选择框。在这里您可以看到第一个select选项的new和old选项被禁用。

预期结果: 当用户更改第一个选择选项时,则需要重新启用先前选择的第一个选择元素选项。

示例场景:

 1. In first select box "Product 1" option is selected
 2. In second select box "Product 2" option is selected
 3. In third select box "product 3" option is selected

现在更改第一个选择框中的选定选项

select "Product 5" option in the first select box.

预计将禁用“产品5”选项,并在第二和第三个选择框中启用“产品1”。但只有致残发生。没有重新启用“产品1”。

我试过的:

$('.products_combo')
    .not(this)
    .children('option[value="' + fieldValue + '"]')
    .prop('disabled', true);

它给出了与代码片段相同的结果。

如果我加上

.siblings().prop('disabled', false);

然后所有其他选项都被启用。所以这不起作用。

怎么解决这个问题?

要测试的代码段:

$('body').on("change", ".products-combo", function (evt) {
  var fieldValue  = $(this).val();
  $(this).siblings('.products-combo').children('option').each(function() {
    if ( $(this).val() === fieldValue ) {
      $(this).attr('disabled', true);   
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="products-combo" name="product[]">
  <option>Select 1</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
  <option value="4">Product 4</option>
  <option value="5">Product 5</option>
</select>
<select class="products-combo" name="product[]">
  <option>Select 2</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
  <option value="4">Product 4</option>
  <option value="5">Product 5</option>
</select>
<select class="products-combo" name="product[]">
  <option>Select 3</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
  <option value="4">Product 4</option>
  <option value="5">Product 5</option>
</select>

一个可能的解决方案:

打开 .products-combo 更改事件使当前选定的数组选项值 <选择> 身份证是钥匙。穿过每一个根据条件选择并禁用或启用。

1 回复 | 直到 7 年前

Salmen Bejaoui 7 年前

循环所有选项时,如果该选项不是选定的选项,则需要重新启用它。

const $selects = $(".products-combo");
$selects.on('change', function(evt) {
    // create empty array to store the selected values
    const selectedValue = [];
    // get all selected options and filter them to get only options with value attr (to skip the default options). After that push the values to the array.
    $selects.find(':selected').filter(function(idx, el) {
        return $(el).attr('value');
    }).each(function(idx, el) {
        selectedValue.push($(el).attr('value'));
    });
    // loop all the options
    $selects.find('option').each(function(idx, option) { 
        // if the array contains the current option value otherwise we re-enable it.
        if (selectedValue.indexOf($(option).attr('value')) > -1) {
            // if the current option is the selected option, we skip it otherwise we disable it.
            if ($(option).is(':checked')) {
                return;
            } else {
                $(this).attr('disabled', true);
            }
        } else {
            $(this).attr('disabled', false);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="products-combo" name="product[]">
  <option>Select 1</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
  <option value="4">Product 4</option>
  <option value="5">Product 5</option>
</select>
<select class="products-combo" name="product[]">
  <option>Select 2</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
  <option value="4">Product 4</option>
  <option value="5">Product 5</option>
</select>
<select class="products-combo" name="product[]">
  <option>Select 3</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
  <option value="4">Product 4</option>
  <option value="5">Product 5</option>
</select>