4

O evento click configurado para o elemento optgroup também é ativado quando uma option é clicada. Como esse comportamento pode ser evitado?

$("optgroup").on("click", function() {
  console.log($(this));
  $(this).children().prop("selected", "selected");

  // $('#search_form select option').each(
  // 	function() {
  // 		$(this).removeAttr('selected');
  // 	}
  // );

  // $(this).next().children("option").prop("selected", false);
  // $(this).prev().children("option").prop("selected", false);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="clientesearch-venda_canal_id" class="form-control" name="ClienteSearch[venda_canal_id][]" multiple="" size="5">
<optgroup label="00">
<option value="00.0">00.0 - A CLASSIFICAR</option>
</optgroup>
<optgroup label="01">
<option value="01.0">01.0 - INDUSTRIAS</option>
<option value="01.1">01.1 - GRANDE PORTE</option>
<option value="01.2">01.2 - MEDIO PORTE</option>
<option value="01.3">01.3 - PEQUENO PORTE</option>
</optgroup>
<optgroup label="03">
<option value="03.0">03.0 - DISTRIBUIDOR SOCOCO</option>
<option value="03.1">03.1 - DISTRIBUIDOR</option>
</optgroup>
<optgroup label="04">
<option value="04.0">04.0 - MICRO DISTRIBUIDOR</option>
</optgroup>
<optgroup label="05">
<option value="05.0">05.0 - ATACADISTA E DISTRIBUIDOR</option>
<option value="05.1">05.1 - ATACADISTA</option>
<option value="05.2">05.2 - ATACAREJO</option>
</optgroup>
<optgroup label="06">
<option value="06.0">06.0 - GRANDES REDES NACIONAIS</option>
<option value="06.1">06.1 - GRANDES REDES NACIONAIS</option>
</optgroup>
<optgroup label="09">
<option value="09.0">09.0 - AUTO SERVICE</option>
<option value="09.1">09.1 - SUPERMERCADO</option>
<option value="09.2">09.2 - MERCADO</option>
<option value="09.3">09.3 - LOJA DE CONVENIENCIA</option>
</optgroup>
<optgroup label="12">
<option value="12.0">12.0 - VAREJO TRADICIONAL</option>
<option value="12.1">12.1 - PADARIA</option>
<option value="12.2">12.2 - MERCEARIA</option>
<option value="12.3">12.3 - EMPORIO</option>
<option value="12.4">12.4 - SACOLAO</option>
</optgroup>
<optgroup label="15">
<option value="15.1">15.1 - RESTAURANTE</option>
<option value="15.2">15.2 - LANCHONETE</option>
<option value="15.3">15.3 - BAR</option>
</optgroup>
</select>

2
  • Queres evitar que um clique no option dispare o clique no optionGroup, é isso?
    – Sergio
    Commented 10/10/2017 às 14:12
  • Exatamente, @Sergio. A intenção é que ao clicar somente no optionGroup os filhos sejam todos selecionados. Caso uma option seja selecionada sozinha, somente ela deve permanecer. Commented 10/10/2017 às 14:13

1 Resposta 1

5

Neste caso o melhor é comparar se o event.target é o mesmo que o elemento que tem o auscultador do evento, ou seja o this.

$("optgroup").on("click", function(e) {
  if (e.target != this) return;

Podes fazer isso assim:

$("optgroup").on("click", function(e) {
  if (e.target != this) return;
  console.log(this.tagName);
  $(this).children().prop("selected", "selected");

  // $('#search_form select option').each(
  // 	function() {
  // 		$(this).removeAttr('selected');
  // 	}
  // );

  // $(this).next().children("option").prop("selected", false);
  // $(this).prev().children("option").prop("selected", false);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="clientesearch-venda_canal_id" class="form-control" name="ClienteSearch[venda_canal_id][]" multiple="" size="5">
<optgroup label="00">
<option value="00.0">00.0 - A CLASSIFICAR</option>
</optgroup>
<optgroup label="01">
<option value="01.0">01.0 - INDUSTRIAS</option>
<option value="01.1">01.1 - GRANDE PORTE</option>
<option value="01.2">01.2 - MEDIO PORTE</option>
<option value="01.3">01.3 - PEQUENO PORTE</option>
</optgroup>
<optgroup label="03">
<option value="03.0">03.0 - DISTRIBUIDOR SOCOCO</option>
<option value="03.1">03.1 - DISTRIBUIDOR</option>
</optgroup>
<optgroup label="04">
<option value="04.0">04.0 - MICRO DISTRIBUIDOR</option>
</optgroup>
<optgroup label="05">
<option value="05.0">05.0 - ATACADISTA E DISTRIBUIDOR</option>
<option value="05.1">05.1 - ATACADISTA</option>
<option value="05.2">05.2 - ATACAREJO</option>
</optgroup>
<optgroup label="06">
<option value="06.0">06.0 - GRANDES REDES NACIONAIS</option>
<option value="06.1">06.1 - GRANDES REDES NACIONAIS</option>
</optgroup>
<optgroup label="09">
<option value="09.0">09.0 - AUTO SERVICE</option>
<option value="09.1">09.1 - SUPERMERCADO</option>
<option value="09.2">09.2 - MERCADO</option>
<option value="09.3">09.3 - LOJA DE CONVENIENCIA</option>
</optgroup>
<optgroup label="12">
<option value="12.0">12.0 - VAREJO TRADICIONAL</option>
<option value="12.1">12.1 - PADARIA</option>
<option value="12.2">12.2 - MERCEARIA</option>
<option value="12.3">12.3 - EMPORIO</option>
<option value="12.4">12.4 - SACOLAO</option>
</optgroup>
<optgroup label="15">
<option value="15.1">15.1 - RESTAURANTE</option>
<option value="15.2">15.2 - LANCHONETE</option>
<option value="15.3">15.3 - BAR</option>
</optgroup>
</select>

Outra variante seria impedir o evento de chegar ao optGroup com

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

Podes fazer isso assim:

$("option").on("click", function(e) { e.stopPropagation(); });
$("optgroup").on("click", function(e) {
  console.log(this.tagName);
  $(this).children().prop("selected", "selected");

  // $('#search_form select option').each(
  // 	function() {
  // 		$(this).removeAttr('selected');
  // 	}
  // );

  // $(this).next().children("option").prop("selected", false);
  // $(this).prev().children("option").prop("selected", false);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="clientesearch-venda_canal_id" class="form-control" name="ClienteSearch[venda_canal_id][]" multiple="" size="5">
<optgroup label="00">
<option value="00.0">00.0 - A CLASSIFICAR</option>
</optgroup>
<optgroup label="01">
<option value="01.0">01.0 - INDUSTRIAS</option>
<option value="01.1">01.1 - GRANDE PORTE</option>
<option value="01.2">01.2 - MEDIO PORTE</option>
<option value="01.3">01.3 - PEQUENO PORTE</option>
</optgroup>
<optgroup label="03">
<option value="03.0">03.0 - DISTRIBUIDOR SOCOCO</option>
<option value="03.1">03.1 - DISTRIBUIDOR</option>
</optgroup>
<optgroup label="04">
<option value="04.0">04.0 - MICRO DISTRIBUIDOR</option>
</optgroup>
<optgroup label="05">
<option value="05.0">05.0 - ATACADISTA E DISTRIBUIDOR</option>
<option value="05.1">05.1 - ATACADISTA</option>
<option value="05.2">05.2 - ATACAREJO</option>
</optgroup>
<optgroup label="06">
<option value="06.0">06.0 - GRANDES REDES NACIONAIS</option>
<option value="06.1">06.1 - GRANDES REDES NACIONAIS</option>
</optgroup>
<optgroup label="09">
<option value="09.0">09.0 - AUTO SERVICE</option>
<option value="09.1">09.1 - SUPERMERCADO</option>
<option value="09.2">09.2 - MERCADO</option>
<option value="09.3">09.3 - LOJA DE CONVENIENCIA</option>
</optgroup>
<optgroup label="12">
<option value="12.0">12.0 - VAREJO TRADICIONAL</option>
<option value="12.1">12.1 - PADARIA</option>
<option value="12.2">12.2 - MERCEARIA</option>
<option value="12.3">12.3 - EMPORIO</option>
<option value="12.4">12.4 - SACOLAO</option>
</optgroup>
<optgroup label="15">
<option value="15.1">15.1 - RESTAURANTE</option>
<option value="15.2">15.2 - LANCHONETE</option>
<option value="15.3">15.3 - BAR</option>
</optgroup>
</select>

2
  • A tua solução é viável. Esse é realmente o comportamento padrão do seletor? O filho também invoca o evento do elemento pai? Commented 10/10/2017 às 14:16
  • 1
    @MarcelodeAndrade exato. Se quiseres evitar isso tens de fazer $("option").on("click", function(e) { e.stopPropagation(); });. Mas assim fica mais curto.
    – Sergio
    Commented 10/10/2017 às 14:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .