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

Question

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

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

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

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

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

目前一切正常。

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

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

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

场景示例：

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

然后启用所有其他选项。所以这是行不通的。

如何解决这个问题？

要测试的片段：

 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.

一个可能的解决方案：

在.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>