jQuery - 检查下拉 <select> 的多个值和任何更改

Question

我的团队正在为即将举行的公司赠品/比赛制作表格，需要一些帮助。此表格以 10 个多项选择题为中心，我们将在右侧栏中的 20 个选项中提供答案。

我们的目标是消除用户在使用 JavaScript 或 jQuery 浏览 10 个字段时所做的任何猜测。我将要分享的代码有效地将所需的 CSS 效果添加到相应的选择中，如果该下拉字段发生更改，它会删除该类。如果我们只使用一个下拉选择，这将起作用。

但是，我遇到的问题是 CSS 类，除非您选择与之前选择的选项值相同的选项值，否则在您进行下一次选择时将被删除。例如，如果您在第一个下拉列表中选择“一个”，它将被正确划掉，直到您在下拉列表 2 到 10 中选择任何其他选项值（即 2-20）。第二个选择将是唯一被划掉的列表项。

目标：如果从任何下拉菜单中选择选项值，则需要将其划掉。如果它被选中然后从所有下拉列表中取消选择，则需要完全删除 CSS 类。

如果我的格式和问题不清楚，我深表歉意；这是我的第一篇文章。提前谢谢你。

小提琴：https://jsfiddle.net/ehcx8vun/16/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <select name="one" class="mySelect">
  <option value="">---</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
  <option value="Four">Four</option>
  <option value="Five">Five</option>
</select>

  <select name="two" class="mySelect">
  <option value="">---</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
  <option value="Four">Four</option>
  <option value="Five">Five</option>
</select>

  <select name="three" class="mySelect">
  <option value="">---</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
  <option value="Four">Four</option>
  <option value="Five">Five</option>
</select>

  <select name="four" class="mySelect">
  <option value="">---</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
  <option value="Four">Four</option>
  <option value="Five">Five</option>
</select>

  <select name="five" class="mySelect">
  <option value="">---</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
  <option value="Four">Four</option>
  <option value="Five">Five</option>
</select>

</div>

<div class="right">
  <ul>
    <li class="multiple-choice-list">One</li>
    <li class="multiple-choice-list">Two</li>
    <li class="multiple-choice-list">Three</li>
    <li class="multiple-choice-list">Four</li>
    <li class="multiple-choice-list">Five</li>
  </ul>
</div>

Answer 1

您可以使用map() 和filter() 获取所有选定的值。循环遍历所有选择并隐藏选定的选项。

要删除<li>s，您可以循环通过<li>s 并使用includes()检查是否被选中

$('select').change(function() {
  var selected = $('select').map(function() {
    return this.value;
  }).get().filter(o => o !== '');


  //Hide Selected on drop downs
  if ($(this).val() != "") {
    $("select").not(this).find("option").show().filter(function() {
      return $(this).val() != "" && selected.includes($(this).val());
    }).hide();
  } else {
    $("select").find("option").show().filter(function() {
      return $(this).val() != "" && selected.includes($(this).val());
    }).hide();
  }


  //Remove all class on li
  $('ul li').removeClass('selected-option');

  //Add class to all selected
  $('ul li').each(function() {
    if (selected.includes($(this).text())) $(this).addClass('selected-option');
  })
});

.left {
  float: left;
  width: 75%;
}

.right {
  float: right;
  width: 25%;
  list-style: none;
  background: blue;
  color: #fff;
}

.right li {
  list-style: none;
}

.selected-option {
  opacity: .5;
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <select name="one" class="mySelect">
    <option value="">---</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
  </select>

  <select name="two" class="mySelect">
    <option value="">---</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
  </select>

  <select name="three" class="mySelect">
    <option value="">---</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
  </select>

  <select name="four" class="mySelect">
    <option value="">---</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
  </select>

  <select name="five" class="mySelect">
    <option value="">---</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
  </select>

</div>

<div class="right">
  <ul>
    <li class="multiple-choice-list">One</li>
    <li class="multiple-choice-list">Two</li>
    <li class="multiple-choice-list">Three</li>
    <li class="multiple-choice-list">Four</li>
    <li class="multiple-choice-list">Five</li>
  </ul>
</div>