Question

我有3个选择语句，每个语句共享相同的5个选项。

如何确保在其中一个选项中选择一个选项时，它不会出现在其他选项中？

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

Answer 1

您可以使用HTML5 hidden属性。如果您需要支持非HTML5，请转而使用disabled属性。请注意，jQuery .hide()不适用于所有浏览器。

$(function () {
  $('select').change(function() {
    var used = new Set;
    $('select').each(function () {
      var reset = false;
      $('option', this).each(function () {
        var hide = used.has($(this).text());
        if (hide && $(this).is(':selected')) reset = true;
        $(this).prop('hidden', hide);
      });
      if (reset) $('option:not([hidden]):first', this).prop('selected', true);  
      used.add($('option:selected', this).text());
    });
  }).trigger('change'); // run at load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

此解决方案将在第二个下拉列表中减少一个选项，在第三个下拉列表中减少两个选项。在第一个下拉列表中选择使用的选项将更改另一个下拉选项。

替代

另一种方法是只使用一个select，并允许用户进行多项选择，并使用代码来防止选择超过3项：

$('select').change(function() {
  if ($(':selected', this).length > 3) {
    $(':selected', this).slice(3).prop('selected', false);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size=5>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

Answer 2

你可以从这开始：

＆＃13;

$("select").on("change",function() {
  var v = $(this).val();
    $("select").children("option").each(function() {
      if($(this).val() == v && !$(this).attr("selected")) {
        $(this).hide();
      }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option selected="selected"></option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<select>
  <option selected="selected"></option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<select>
  <option></option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

＆＃13;

使用此功能，您可以添加或删除任意数量的选项并根据需要进行选择。

（当您使用$(this).hide();取消选择该选项时，您需要添加一些内容，以防再次显示它们）

Answer 3

提供的选项不允许改变主意，一旦选项消失了，或者它始终将每个选项都保留在其中一个框中

如果您选择了错误的值，则选项随机更改似乎不太优雅，如果您更改了框1和框3刚选择了第一个可用选项，则可能会导致错误答案

我也欢迎任何想要使我的代码更整洁的人（它可能可以改进，但确实可以工作

$('select').on('change', function() {
  var selectedValues = [];
  $('select').each(function() {
    var thisValue = this.value;
    if(thisValue !== '')
      selectedValues.push(thisValue);
  }).each(function() {
    $(this).find('option:not(:selected)').each(function() {
      if( $.inArray( this.value, selectedValues ) === -1 ) {
        $(this).removeAttr('hidden');
      } else {
        if(this.value !== '')
          $(this).attr('hidden', 'hidden');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="" selected="selected">--choose--</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<select>
  <option value="" selected="selected">--choose--</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<select>
  <option value="" selected="selected">--choose--</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

唯一选择选项值

3 个答案:

替代