Question

我的团队正在为即将到来的公司赠品/比赛制作表格，需要一些帮助。此表格以10个多项选择题为中心，我们将在右栏中的20个选项中提供答案。我们的目标是清除用户在使用JavaScript或jQuery进入10个字段时所做的任何猜测。我要分享的代码有效地将所需的CSS效果添加到相应的选择中，如果该下拉字段被更改，它将删除该类。如果我们只使用一个下拉选择，这将有效。但是，我遇到的问题是CSS类，除非您选择与之前选择的选项值相同的选项值，否则在您进行下一次选择后将删除该类。例如，如果您在第一个下拉列表中选择“一个”，它将被正确划掉，直到您在下拉列表2到10中选择任何其他选项值（即2-20）。第二个选择将是划掉的唯一列表项。目标：如果从任何下拉列表中选择了选项值，则需要将其划掉。如果选择它然后从所有下拉列表中取消选择，则需要完全删除CSS类。如果我的格式和问题不清楚，我道歉;这是我的第一篇文章。先感谢您。小提琴：https：//jsfiddle.net/ehcx8vun/16/ ＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”＆gt;＆lt; / script＆gt; ＆lt; div class =“left”＆gt; ＆lt; select name =“one”class =“mySelect”＆gt; ＆lt; option value =“”＆gt; ---＆lt; / option＆gt; ＆lt; option value =“One”＆gt; One＆lt; / option＆gt; ＆lt; option value =“Two”＆gt; Two＆lt; / option＆gt; ＆lt; option value =“Three”＆gt; Three＆lt; / option＆gt; ＆lt; option value =“Four”＆gt; Four＆lt; / option＆gt; ＆lt; option value =“Five”＆gt; Five＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select name =“two”class =“mySelect”＆gt; ＆lt; option value =“”＆gt; ---＆lt; / option＆gt; ＆lt; option value =“One”＆gt; One＆lt; / option＆gt; ＆lt; option value =“Two”＆gt; Two＆lt; / option＆gt; ＆lt; option value =“Three”＆gt; Three＆lt; / option＆gt; ＆lt; option value =“Four”＆gt; Four＆lt; / option＆gt; ＆lt; option value =“Five”＆gt; Five＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select name =“three”class =“mySelect”＆gt; ＆lt; option value =“”＆gt; ---＆lt; / option＆gt; ＆lt; option value =“One”＆gt; One＆lt; / option＆gt; ＆lt; option value =“Two”＆gt; Two＆lt; / option＆gt; ＆lt; option value =“Three”＆gt; Three＆lt; / option＆gt; ＆lt; option value =“Four”＆gt; Four＆lt; / option＆gt; ＆lt; option value =“Five”＆gt; Five＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select name =“four”class =“mySelect”＆gt; ＆lt; option value =“”＆gt; ---＆lt; / option＆gt; ＆lt; option value =“One”＆gt; One＆lt; / option＆gt; ＆lt; option value =“Two”＆gt; Two＆lt; / option＆gt; ＆lt; option value =“Three”＆gt; Three＆lt; / option＆gt; ＆lt; option value =“Four”＆gt; Four＆lt; / option＆gt; ＆lt; option value =“Five”＆gt; Five＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select name =“five”class =“mySelect”＆gt; ＆lt; option value =“”＆gt; ---＆lt; / option＆gt; ＆lt; option value =“One”＆gt; One＆lt; / option＆gt; ＆lt; option value =“Two”＆gt; Two＆lt; / option＆gt; ＆lt; option value =“Three”＆gt; Three＆lt; / option＆gt; ＆lt; option value =“Four”＆gt; Four＆lt; / option＆gt; ＆lt; option value =“Five”＆gt; Five＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆lt; div class =“right”＆gt; ＆LT; UL＆GT; ＆lt; li class =“multiple-choice-list”＆gt; One＆lt; / li＆gt; ＆lt; li class =“multiple-choice-list”＆gt;两个＆lt; / li＆gt; ＆lt; li class =“multiple-choice-list”＆gt; Three＆lt; / li＆gt; ＆lt; li class =“multiple-choice-list”＆gt; Four＆lt; / li＆gt; ＆lt; li class =“multiple-choice-list”＆gt; Five＆lt; / li＆gt; ＆LT; / UL＆GT; ＆LT; / DIV＆GT;

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>

jQuery - 检查下拉列表<select>以获取多个值和任何更改

1 个答案: