时间戳

首页 > 解决方案 > 具有相同选项的 Jquery/Javascript 多选下拉菜单

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

问题描述

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

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

标签： javascriptjquery

解决方案

这是工作片段。

您的代码的两个更改是：

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

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

  2. 而不是.attr('disabled', true)你应该使用.attr('disabled', 'disabled')or 与 jQuery 1.7+ .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>

推荐阅读