Как переключить класс в опции множественного выбора?

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 для выбранной опции, и для этого я не хочу перебирать все опции, так как это большой список номеров.

ПРИМЕЧАНИЕ

Здесь я разрешаю выбрать несколько вариантов. Как можно было получить только выбранную опцию и переключить класс только для этой опции?

jquery html

-3

Kaishu 30 Апр 2016 в 13:33

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>

1

Praveen Kumar Purushothaman 30 Апр 2016 в 10:39

Answer 2

Вот один из способов сделать это.

В этом примере он добавляет жирный шрифт к классу 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>

0

Gjermund Dahl 30 Апр 2016 в 14:23

Answer 3

Я немного скорректировал HTML, теперь у выбора есть идентификатор.

<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");
});

0

Gerard 30 Апр 2016 в 11:10

Как переключить класс в опции множественного выбора?

3 ответа

Похожие вопросы

Новые вопросы

jquery