Acione o evento change () ao definir o valor de <select> com a função val ()

Qual é a maneira mais fácil e melhor de acionar um evento de alteração ao definir o valor do elemento de seleção .

Eu esperava que a execução do código a seguir

$('select#some').val(10);

ou

$('select#some').attr('value',  10);

resultaria em desencadear o evento de mudança, que eu acho que é uma coisa bastante lógica a ser feita. Certo?

Bem, não é o caso. Você precisa alterar o evento change () fazendo isso

$('select#some').val(10).change();

ou

$('select#some').val(10).trigger('change');

mas estou procurando uma solução que desencadeie o evento de alteração assim que o valor do select for alterado por algum código javascript.

Eu tive um problema muito semelhante e não tenho muita certeza do que você está tendo um problema, pois o código sugerido funcionou muito bem para mim. Ele imediatamente (a exigência de seu) desencadeia o seguinte código mudança.

$('#selectField').change(function(){
    if($('#selectField').val() == 'N'){
        $('#secondaryInput').hide();
    } else {
        $('#secondaryInput').show();
}
});

Depois, pego o valor do banco de dados (usado em um formulário para entrada nova e edição de registros existentes), defino-o como o valor selecionado e adiciono a peça que estava faltando para acionar o código acima ".change () "

$('#selectField').val(valueFromDatabase).change();

Para que, se o valor existente no banco de dados for 'N', oculte imediatamente o campo de entrada secundário no meu formulário.

Uma coisa que eu descobri (da maneira mais difícil), é que você deveria ter

$('#selectField').change(function(){
  // some content ...
});

definido ANTES de usar

$('#selectField').val(10).trigger('change');

ou

 $('#selectField').val(10).change();

A resposta direta já está em uma pergunta duplicada: Por que o evento jquery change não é acionado quando eu defino o valor de um select usando val ()?

Como você provavelmente sabe que definir o valor do select não aciona o evento change (), se você estiver procurando por um evento que é acionado quando o valor de um elemento foi alterado por JS, não existe um.

Se você realmente quer fazer isso, acho que a única maneira é escrever uma função que verifique o DOM em um intervalo e rastreie os valores alterados, mas definitivamente não faça isso a menos que você precise (não sei por que você precisaria)

Adicionada esta solução:
Outra solução possível seria criar sua própria .val()função de wrapper e fazer com que ele disparasse um evento personalizado depois de definir o valor .val(); quando você usar o wrapper .val () para definir o valor de, <select>ele disparará seu evento personalizado que você pode prender e manipular.

Certifique-se de return thisque ele possa ser encadeado em forma de jQuery

Eu o separo e depois uso uma comparação de identidade para ditar o que será feito a seguir.

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});

Como o jQuery não acionará o evento de alteração nativo, mas somente o seu próprio evento de alteração. Se você vincular um evento sem jQuery e, em seguida, usar o jQuery para acioná-lo, os retornos de chamada vinculados não serão executados!

A solução é a seguinte (100% funcionando):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));