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

133

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.

— Goran Radulovic
źródło

czysty element javascript.addEventListener?

— Manuel Bitto

4

$ ('wybierz # trochę'). val (10) .change (); jest prawie natychmiastowy dla użytkownika.

— Dimitri

@Manuel, próbowałem tego. iv'e użył object.change = function (.... and object.addEventListener (... ale żaden z object.value, $ (object) .val () and $ (object) .attr ('value') wywołałoby tego słuchacza

— Goran Radulovic

126

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.

— krytyk
źródło

Właśnie tego potrzebowałem. Jaki jest najlepszy sposób, aby dowiedzieć się, jak dynamicznie wyzwalać programy obsługi zdarzeń DOM? Czy jQuery dobrze to dokumentuje? Dziękuję Ci!

— Con Antonakos

2

$ ("# Discount_type") .val (2) .trigger ('zmień');

— Satanand Tiwari

$ ('# add_itp_spt_parent_id'). val (add_fpt_val) .trigger ('change'); $ ('# add_itp_spt_parent_id'). change (); oba rozwiązania nie działają.

— Kamlesh

Zdefiniowana funkcja zmiany przed użyciem rozwiązała mój problem. Dzięki.

— Kamlesh,

45

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();

— Dima R.
źródło

4

Stary post, ale to rozwiązało mój problem, uchroniło mnie przed długotrwałym pękaniem mózgu… Musisz zdefiniować słuchacza przed użyciem. Nawet w czystym JavaScript.

— Temitayo

Czy możesz trochę rozwinąć? Czy „zmiana ()” nie istnieje z tego powodu?

— Dima R.

Cóż, powiem, że może tego rodzaju słuchacze nie są podnoszeni pod obciążeniem, w moim projekcie dzwoniłem change()przed zdefiniowaniem słuchacza i nie zadziałało, dopóki nie przeniosłem change()połączenia pod słuchacza i zadziałało. Cóż, powiem, że nie powinno to stanowić problemu, jest to tylko kwestia sposobu, w jaki ustrukturyzujesz swój kod.

— Temitayo,

1

To jest to, czego potrzebowałem. Dzięki temu rozwiązałem ten problem całą wieczność.

— Jamie M.

Brawo!!! „Zdefiniowana funkcja zmiany PRZED użyciem” rozwiązała mój problem. Dzięki, kochanie.

— Kamlesh

17

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

— Clarence Liu
źródło

Przeczytałem kilka forów poświęconych temu pytaniu, a Twoja odpowiedź była ostatnim uzupełnieniem, którego szukałem. Pomysł śledzenia działa tylko jako eksperyment myślowy, oczywiście byłby całkowicie niepraktyczny, ale jest ilustracyjny; Pomysł na opakowanie jest niesamowity i dziękuję za wskazanie części „zwróć to”. Pozdrowienia.

— David L

Dlaczego nie $('select').val(value).change()działa cały czas? Jakieś jasne wyjaśnienie?

— Istiaque Ahmed

3

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

— Mohamed23gharbi
źródło

2

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

— Beaumont
źródło