jQuery-检查下拉列表 <select>用于多个值和任何更改

Question

My team is building out a form for an upcoming company giveaway / competition and are in need of some assistance. This form is centered on 10 multiple choice questions, for which we will provide the answers amongst 20 options in the right-hand column.

Our goal is to scratch out any guesses the users make as they progress through the 10 fields using JavaScript or jQuery. The code I'm going to share effectively adds the desired CSS effect to the corresponding selection and it removes the class if that drop-down field is changed. This would work if we were only using one drop-down select.

However, the issue I've run into is the CSS class, unless you pick the same option value as the one you previously selected, is removed once you make your next selection. For example, if you choose 'One' in the first drop-down, it will be correctly crossed out until you select any other option value (ie 2-20) in drop-downs two through ten. That second selection will be the lone list item crossed out.

Goal : If the option value is selected from any drop-down, it needs to be crossed out. If it is chosen and then deselected from all drop-downs, the CSS class needs to be removed completely.

I apologize if my formatting and question is not clear; this is my first post. Thank you in advance.

fiddle: 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

You can get all the selected values using map() and filter() . Loop thru all select and hide the selected options.

to cross out the <li> s, you can loop thru the <li> s and check if selected using 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>