JQuery: простой способ быстро выбрать целую группу в поле выбора

Question

Я использую функцию jQuery, аналогичную той, что в этой теме: Простой способ быстрого выбора всей optgroup в поле выбора

Но когда я нажимаю <option>, теперь он выбирает всю optgroup, так как optgroup включает элементы option. Я использую следующий фрагмент:

  $("optgroup").click(function(e) {
    $(this).children().attr('selected','selected');
  });

мой HTML выглядит так:

<optgroup label="Abc">
<option value="8" >Ab</option> 
<option value="7" >C</option></optgroup>

Так что клик по <option>C</option> также выбирает <option>Ab</option>. Возможно, я упускаю что-то очевидное ...

Answer 1

Я могу ошибаться, но вам может понадобиться добавить обработчик к <option> s, чтобы остановить всплывающее событие клика.

Что-то простое, как это может помочь:

$("optgroup option").click(function(e) {
    e.stopPropagation();
});

Answer 2

также вы можете проверить цель в вашем обработчике кликов optgroup, и короткое замыкание, если целью события является фактически тег опции, например:

$("optgroup").click(function(e) {
   if ($(e.target).is('option')) return;
   $(this).children().attr('selected','selected');
});