Uruchom zdarzenie change () podczas ustawiania wartości <select> za pomocą funkcji val ()

Jaki jest najłatwiejszy i najlepszy sposób wywołania zdarzenia zmiany podczas ustawiania wartości wybranego elementu.

Spodziewałem się, że wykonanie następującego kodu

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

lub

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

spowodowałoby wyzwolenie zdarzenia zmiany, co moim zdaniem jest logiczną rzeczą do zrobienia. Dobrze?

Cóż, tak nie jest. W ten sposób musisz wyzwolić zdarzenie change ()

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

lub

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

ale szukam rozwiązania, które wywołałoby zdarzenie zmiany, gdy tylko wartość select zostanie zmieniona przez jakiś kod javascript.

Miałem bardzo podobny problem i nie jestem do końca pewien, z czym masz problem, ponieważ Twój sugerowany kod działał świetnie. To natychmiast (wymóg twój) wywołuje następujący kod zmiany.

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

Następnie pobieram wartość z bazy danych (jest ona używana w formularzu zarówno dla nowych danych wejściowych, jak i edycji istniejących rekordów), ustawiam ją jako wybraną wartość i dodaję brakującą część, aby wywołać powyższy kod, ".change () ”.

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

Tak więc, jeśli istniejąca wartość z bazy danych to „N”, natychmiast ukrywa dodatkowe pole wejściowe w moim formularzu.

Jedną rzeczą, o której się dowiedziałem (na własnej skórze), jest to, że powinieneś był

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

zdefiniowane PRZED użyciem

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

lub

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

Prosta odpowiedź jest już w zduplikowanym pytaniu: Dlaczego zdarzenie zmiany jquery nie jest wyzwalane, gdy ustawiam wartość elementu select przy użyciu funkcji val ()?

Jak zapewne wiesz, ustawienie wartości elementu select nie wyzwala zdarzenia change (), jeśli szukasz zdarzenia, które jest uruchamiane, gdy wartość elementu została zmieniona przez JS, nie ma takiego.

Jeśli naprawdę chcesz to zrobić, myślę, że jedynym sposobem jest napisanie funkcji, która sprawdza DOM w określonym przedziale czasu i śledzi zmienione wartości, ale zdecydowanie nie rób tego, chyba że musisz (nie wiem, dlaczego kiedykolwiek miałbyś to robić)

Dodano to rozwiązanie:
Innym możliwym rozwiązaniem byłoby utworzenie własnej .val()funkcji opakowującej i wyzwolenie niestandardowego zdarzenia po ustawieniu wartości do .val(), a następnie użycie opakowania .val () do ustawienia wartości a <select>spowoduje wywołanie zdarzenia niestandardowego które możesz złapać i poradzić sobie.

Upewnij się return this, że jest to możliwe w łańcuchu w stylu jQuery

Ponieważ jQuery nie wyzwala natywnego zdarzenia zmiany, ale wyzwala tylko własne zdarzenie zmiany. Jeśli powiążesz zdarzenie bez jQuery, a następnie użyjesz jQuery do wyzwolenia go, wywołania zwrotne, które powiążesz, nie będą działać!

Rozwiązanie jest wtedy takie jak poniżej (w 100% działające):

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

Oddzielam go, a następnie używam porównania tożsamości, aby dyktować, co będzie dalej.

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