强制组中的每个选择具有唯一值答案

【问题标题】：Force each select in group to have a unique value强制组中的每个选择具有唯一值
【发布时间】：2019-10-16 02:00:36
【问题描述】：

我有一组 6 个下拉菜单（选择元素），每个下拉菜单都有相同的 6 个选项。我想要的是，当在下拉列表中选择一个选项时，它会从所有其他选项中删除。然后，如果该下拉列表的值已更改，则应将所选选项重新添加到其他每个下拉列表中。

我的 HTML 包含 6 个下拉菜单，如下所示：

<select>
    <option>Strength</option>
    <option>Dexterity</option>
    <option>Constitution</option>
    <option>Intelligence</option>
    <option>Wisdom</option>
    <option>Charisma</option>
</select>

因此，如果用户在一个下拉菜单中选择“强度”，则应将其从其他下拉菜单中删除，然后如果用户将该下拉菜单更改为“敏捷”，则其他下拉菜单应重新添加“强度”。

【问题讨论】：

这样的问题不能让别人知道如何帮助你。您可以将您认为有问题的主要或代码放入描述中。

标签： javascript jquery dropdown

【解决方案1】：

运行下面的sn-p。

发生的事情是我们将 onchange 事件附加到类；选择组。这个 onchange 事件将遍历属于所有 selectGroups 的所有选项，并隐藏匹配的值。

$(document).ready(function() {

  // attach event to all with selectGroup class
  $(".selectGroup").change(function() {

    // store selected value to variable
    var selectedValue = $(this).val();

    // loop through select > options, show all the previously hidden
    $(".selectGroup").each(function() {
      $(this).find("option").each(function() {
        $(this).show();
      })
    });

    // loop through select > options, hide matching value
    $(".selectGroup").each(function() {
      $(this).find("option").each(function() {
        if ($(this).html() == selectedValue) {
          $(this).hide();
        }
      })
    });
  });
});

.selectGroup {
  margin-bottom: 10px;
  display: block;
}

<label>1st</label>
<select class="selectGroup">
  <option>Strength</option>
  <option>Dexterity</option>
  <option>Constitution</option>
  <option>Intelligence</option>
  <option>Wisdom</option>
  <option>Charisma</option>
</select>

<label>2nd</label>
<select class="selectGroup">
  <option>Strength</option>
  <option>Dexterity</option>
  <option>Constitution</option>
  <option>Intelligence</option>
  <option>Wisdom</option>
  <option>Charisma</option>
</select>

<label>3rd</label>
<select class="selectGroup">
  <option>Strength</option>
  <option>Dexterity</option>
  <option>Constitution</option>
  <option>Intelligence</option>
  <option>Wisdom</option>
  <option>Charisma</option>
</select>

<label>4th</label>
<select class="selectGroup">
  <option>Strength</option>
  <option>Dexterity</option>
  <option>Constitution</option>
  <option>Intelligence</option>
  <option>Wisdom</option>
  <option>Charisma</option>
</select>

<label>5th</label>
<select class="selectGroup">
  <option>Strength</option>
  <option>Dexterity</option>
  <option>Constitution</option>
  <option>Intelligence</option>
  <option>Wisdom</option>
  <option>Charisma</option>
</select>

<label>6th</label>
<select class="selectGroup">
  <option>Strength</option>
  <option>Dexterity</option>
  <option>Constitution</option>
  <option>Intelligence</option>
  <option>Wisdom</option>
  <option>Charisma</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：