jQuery-檢查下拉列表 <select>用於多個值和任何更改

Question

我的團隊正在為即將到來的公司贈品/比賽建立表格，需要一些幫助。 該表格以10個多項選擇題為中心，我們將在右側欄中為20個選項提供答案。

我們的目標是消除用戶使用JavaScript或jQuery瀏覽10個字段時所做的任何猜測。 我將要共享的代碼將所需的CSS效果有效地添加到了相應的選擇中，並且如果該下拉字段發生了更改，它將刪除該類。 如果我們僅使用一個下拉選擇，這將起作用。

但是，除非您選擇與先前選擇的選項相同的選項值，否則我遇到的問題是CSS類，一旦您進行了下一個選擇，就將其刪除。 例如，如果您在第一個下拉列表中選擇“一個”，它將被正確划掉，直到您在第二個到第十個下拉列表中選擇任何其他選項值（即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> ，您可以遍歷<li>並檢查是否使用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>