Question

我有1500+选项的选择列表：

<select multiselect="multiselect" class="cssClass">
   <option value="ID1">Text</option>
   <option value="ID2">Text</option>
   <option value="ID3">Text</option>
   <option value="ID4">Text</option>
   <option value="ID">Text</option>
   .
   .
</select>

单击一个选项，我想为所选选项切换类ItemSelected，为此我不想循环遍历所有选项，因为它是一个大数字列表。

注意

这里我允许选择多个选项。如何仅为该选项获得单击选项和切换类？

Answer 1

您不需要循环所有内容。只需使用以下eventHandler：

即可

$(".cssClass option").click(function () {
  $(this).toggleClass("ItemSelected");
});

您可以在此处查看工作代码段：

$(function () {
  $(".cssClass option").click(function () {
    $(this).toggleClass("ItemSelected");
  });
});

.cssClass {width: 100px;}
.cssClass option {padding: 5px;}
.cssClass .ItemSelected {background: #99f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiselect="multiselect" class="cssClass" size="5">
  <option value="ID1">Text</option>
  <option value="ID2">Text</option>
  <option value="ID3">Text</option>
  <option value="ID4">Text</option>
  <option value="ID5">Text</option>
</select>

由于重点突出，您还可以选择blur()：

$(function () {
  $(".cssClass option").click(function () {
    $(this).toggleClass("ItemSelected");
    $(".cssClass").blur();
  });
});

.cssClass {width: 100px;}
.cssClass option {padding: 5px;}
.cssClass .ItemSelected {background: #99f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiselect="multiselect" class="cssClass" size="5">
  <option value="ID1">Text</option>
  <option value="ID2">Text</option>
  <option value="ID3">Text</option>
  <option value="ID4">Text</option>
  <option value="ID5">Text</option>
</select>

或取消选择选择：

$(function () {
  $(".cssClass option").click(function () {
    $(this).toggleClass("ItemSelected");
    $(".cssClass").val("-1");
  });
});

.cssClass {width: 100px;}
.cssClass option {padding: 5px;}
.cssClass .ItemSelected {background: #99f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiselect="multiselect" class="cssClass" size="5">
  <option value="ID1">Text</option>
  <option value="ID2">Text</option>
  <option value="ID3">Text</option>
  <option value="ID4">Text</option>
  <option value="ID5">Text</option>
</select>

Answer 2

我稍微调整了HTML，现在选择了ID。

<div class="parent" style="width:100px; overflow:hidden;">
  <select id="demo" multiselect="multiselect" class="cssClass">
    <option value="ID1">Text 1</option>
    <option value="ID2">Text 2</option>
    <option value="ID3">Text 3</option>
    <option value="ID4">Text 4</option>
  </select>
</div>

使用以下jQuery可以解决您的问题：

$("#demo").change (function() {
  $("#demo option:selected").toggleClass("ItemSelected");
});

Answer 3

这是一种方法。

对于此示例，它将字体粗体添加到ItemSelected类，以使其在视觉上清楚地表明已添加和删除该类。

$(document).on("change", ".cssClass", function(){
    $(this).find("option").removeClass("ItemSelected");
    $(this).find("option:selected").addClass("ItemSelected");
})

.ItemSelected {
  font-weight: 600;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple" class="cssClass">
   <option value="ID1">Text</option>
   <option value="ID2">Text</option>
   <option value="ID3">Text</option>
   <option value="ID4">Text</option>
   <option value="ID">Text</option>
   
   
</select>

如何在多选项选项中切换类？

3 个答案: