JQuery：根据所选值的数组在多个 <select> 上禁用多个 <option>

Question

我确实有一个包含 3 个（或更多）<select> 元素的表单，其类 'products-combo' 和相同的 <option> 值。

目标： 如果在任何<select> 元素中选择了<option>，则禁用每个<select> 中的特定<option>。如果选择的选项改变了，重新启用之前的<option>。

我能够使用下面的 JQuery 来完成禁用部分。但是，如果我在更改另一个 <select> 元素后尝试更改我选择的 <option>，则之前选择的 <option> 不会启用。

在 sn-p 中重现问题的步骤： 按以下顺序在选择框中选择选项。

1. 在第一个选择框中选择一个选项
2. 在第二个选择框中选择一个选项
3. 在第三个选择框中选择一个选项

目前一切正常。

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

在此之后，单击第二个选择或第三个选择框。这里可以看到第一个select选项的新旧选项都被禁用了。

预期结果： 当用户更改第一个选择选项时，预计会重新启用第一个选择元素的先前选择的选项。

场景示例：

 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);

它给出与 sn-p 相同的结果。

如果我添加的话

.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 更改事件上创建一个当前选择的数组 以<select> id 为键的选项值。并遍历每个 根据条件选择和禁用或启用。

Answer 1

循环所有选项时，如果选项不是选中的，需要重新启用。

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>