jQuery / JavaScript多个具有相同选项的选择下拉列表

时间：2018-09-04 12:13:43

标签： javascript jquery

我有一个问题，我可以有多个具有相同选项的选择下拉控件，如果在下拉菜单之一中选择了该选项，则需要禁用该选项，如果重置该选项，则需要重新启用

$('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/

2 个答案:

答案 0 :(得分：2)

这是有效的代码段。

您的代码有两项更改：

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

    如果不选择此选项，则选择1时，它将在所有元素上禁用。但是，当您选择2时，将在所有元素上禁用2，并在它们上重新启用1。因此，为了避免此类问题，我首先跟踪应禁用的所有值，然后对每个选择元素禁用相应的选项元素。

  2. 您应该使用.attr('disabled', true)或jQuery 1.7+ .attr('disabled', 'disabled')代替.prop('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>

答案 1 :(得分：0)

您仅指定了“禁用”选项。 为了好的做法，您应该指定启用该选项。

复制您的函数，并让其将禁用状态恢复为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');
}
});
相关问题
最新问题