具有相同选项的 Jquery/Javascript 多选下拉菜单

Question

我有一个问题，我可以有多个具有相同选项的选择下拉控件，如果它在其中一个下拉列表中被选中，我需要禁用该选项，如果该选项被重置，我需要重新启用

$('select').change(function() {

  if (this.value != "-1") {
    $('#select1, #select2,#select3, #select4, #select5').not(this)
      .children('option[value=' + this.value + ']')
      .attr('disabled', true)
      .siblings().removeAttr('disabled');
  }
});

body {
  margin: 20px;
}

select {
  border: 0;
  width: 100%;
}

td {
  width: 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" width="50%">
  <tr>
    <td>Cost Saving</td>
    <td>
      <select name="" id="select1">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Imrpove Quality</td>
    <td>
      <select name="" id="select2">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Improve customer sat</td>
    <td>
      <select name="" id="select3">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Improve employee sat</td>
    <td>
      <select name="" id="select4">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Adhere to Regulatory compliance</td>
    <td>
      <select name="" id="select5">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
</table>

因此，如果用户在 select1 中选择选项 1，则需要在所有其他选择下拉菜单中禁用选项 1，如果用户选择“请选择一个”，则需要重新启用选项 1”

我有以下内容，但无法正常工作 http://jsfiddle.net/EuNw4/208/

Answer 1

这是工作的 sn-p。

您的代码有两个变化：

1. 每次所选选项更改时，我都会重新评估可用选项。因此，如果选择了 1 和 3，则可以确保它们在所有选择元素上都被禁用。

   没有这个，当你选择 1 时，它将在所有元素上被禁用。但是当您选择 2 时，2 将在所有元素上禁用，1 将在它们上重新启用。因此，为避免此类问题，我首先跟踪所有应禁用的值，然后为每个选择元素禁用适当的选项元素。

2. 您应该使用 .attr('disabled', 'disabled') 或 jQuery 1.7+ .prop('disabled', true)，而不是 .attr('disabled', true)。

$('select').change(function() {
  reEvaluateAvailableOptions();
});

function reEvaluateAvailableOptions() {
  var selectElements = $('#select1, #select2,#select3, #select4, #select5');

  var selectedValues = [];
  selectElements.each(function() {
    var value = $(this).val();

    value >= 0 && selectedValues.push(value);
  });

  // Disable all the selected values.
  selectElements.each(function() {
    var currentValue = $(this).val();


    $(this).children('option')
      .removeAttr("disabled")
      .each(function() {

        var value = this.value;
        if (selectedValues.indexOf(value) >= 0 && currentValue != value) {
          $(this).attr('disabled', "disabled");
        }
      });
  });
}

body {
  margin: 20px;
}

select {
  border: 0;
  width: 100%;
}

td {
  width: 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" width="50%">
  <tr>
    <td>Cost Saving</td>
    <td>
      <select name="" id="select1">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Imrpove Quality</td>
    <td>
      <select name="" id="select2">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Improve customer sat</td>
    <td>
      <select name="" id="select3">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Improve employee sat</td>
    <td>
      <select name="" id="select4">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Adhere to Regulatory compliance</td>
    <td>
      <select name="" id="select5">
        <option value="-1">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </td>
  </tr>
</table>

Answer 2

您只指定了“禁用”选项。 为了获得良好的实践，您应该指定启用该选项。

复制你的函数，让它将禁用状态恢复为 false 而不是 true。 应该看起来像：

$('select').change(function() {

if (this.value != "-1") {
$('#select1, #select2,#select3, #select4, #select5').not(this)
  .children('option[value=' + this.value + ']')
  .attr('disabled', false)
  .siblings().removeAttr('disabled');

}else if (this.value = "1") {
$('#select1, #select2,#select3, #select4, #select5').not(this)
  .children('option[value=' + this.value + ']')
  .attr('disabled', true)
  .siblings().removeAttr('disabled');
}
});