Trigger change () event ketika mengatur nilai <select> dengan fungsi val ()

132

Apa cara termudah dan terbaik untuk memicu perubahan acara saat mengatur nilai elemen pilih .

Saya berharap menjalankan kode berikut

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

atau

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

akan menghasilkan memicu perubahan acara, yang menurut saya cukup logis untuk dilakukan. Baik?

Yah, bukan itu masalahnya. Anda perlu melakukan triger perubahan () acara dengan melakukan ini

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

atau

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

tapi saya sedang mencari beberapa solusi yang akan memicu perubahan acara segera setelah nilai pilih diubah oleh beberapa kode javascript.

jquery events triggers onchange Goran Radulovic
sumber
elemen javascript murni.addEventListener?
Manuel Bitto
4
$ ('pilih # beberapa'). val (10) .change (); cukup instan untuk pengguna.
Dimitri
@ Manuel, saya sudah mencobanya. iv'e menggunakan object.change = function (.... and object.addEventListener (... tetapi tidak satupun dari object.value, $ (object) .val () dan $ (object) .attr ('value') akan memicu pendengar itu
Goran Radulovic

Jawaban:

124

Saya memiliki masalah yang sangat mirip dan saya tidak yakin dengan apa Anda mengalami masalah, karena kode yang disarankan bekerja dengan baik untuk saya. Ini segera (persyaratan dari Anda) memicu kode perubahan berikut.

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

Lalu saya mengambil nilai dari database (ini digunakan pada formulir untuk input baru dan mengedit catatan yang ada), mengaturnya sebagai nilai yang dipilih, dan menambahkan bagian yang saya lewatkan untuk memicu kode di atas, ".change () ".

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

Sehingga jika nilai yang ada dari database adalah 'N', itu segera menyembunyikan bidang input sekunder di formulir saya.

kritikus
sumber
Inilah yang saya butuhkan. Apa cara terbaik untuk menemukan bagaimana secara dinamis memicu penangan acara DOM? Apakah jQuery mendokumentasikan ini dengan baik? Terima kasih!
Con Antonakos
2
$ ("# discount_type") .val (2) .trigger ('change');
Satanand Tiwari
$ ('# add_itp_spt_parent_id'). val (add_fpt_val) .trigger ('ubah'); $ ('# add_itp_spt_parent_id'). ubah (); kedua solusi tidak berfungsi.
Kamlesh
fungsi perubahan didefinisikan SEBELUM Anda menggunakan, memecahkan masalah saya. Terima kasih.
Kamlesh
45

Satu hal yang saya temukan (dengan cara yang sulit), adalah yang seharusnya Anda miliki 

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

didefinisikan SEBELUM Anda gunakan 

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

atau

 $('#selectField').val(10).change();
Dima R.
sumber
4
Posting lama tapi ini menyelesaikan masalah saya, menyelamatkan saya dari keretakan otak yang panjang lebar ... Anda harus mendefinisikan pendengar sebelum menggunakannya. Bahkan dalam JavaScript murni.
Temitayo
Bisakah Anda menguraikan sedikit? Bukankah "perubahan ()" ada karena alasan ini?
Dima R.
Yah saya akan mengatakan mungkin pendengar semacam ini tidak diangkat pada beban, Dalam proyek saya, saya menelepon change()sebelum mendefinisikan pendengar dan itu tidak berhasil sampai saya memindahkan change()panggilan di bawah pendengar dan itu berhasil. Yah saya akan mengatakan ini seharusnya tidak menjadi masalah, itu hanya masalah cara Anda menyusun kode Anda.
Temitayo
1
Inilah yang saya butuhkan. Butuh waktu selamanya untuk menyelesaikan masalah ini, terima kasih.
Jamie M.
Bravo !!! "Fungsi ubah yang didefinisikan SEBELUM Anda menggunakan", menyelesaikan masalah saya. Terima kasih sayang.
Kamlesh
17

Jawaban langsungnya sudah ada dalam pertanyaan rangkap: Mengapa acara jquery mengubah tidak memicu ketika saya menetapkan nilai pilih menggunakan val ()?

Seperti yang Anda ketahui pengaturan nilai tidak memilih memicu perubahan () acara, jika Anda mencari acara yang dipecat ketika nilai elemen telah diubah melalui JS tidak ada.

Jika Anda benar-benar ingin melakukan ini, saya kira satu-satunya cara adalah menulis fungsi yang memeriksa DOM pada interval dan melacak nilai yang berubah, tetapi jelas tidak melakukan ini kecuali Anda harus (tidak yakin mengapa Anda perlu)

Menambahkan solusi ini: Solusi
lain yang mungkin adalah membuat .val()fungsi pembungkus Anda sendiri dan memicunya memicu acara khusus setelah menyetel nilainya .val(), kemudian ketika Anda menggunakan pembungkus .val () Anda untuk menyetel nilai <select>itu akan memicu acara khusus Anda yang bisa Anda jebak dan tangani.

Pastikan untuk return this, jadi itu bisa dilakukan dengan jQuery

Clarence Liu
sumber
Saya telah membaca beberapa forum tentang pertanyaan ini, dan jawaban Anda adalah penyelesaian terakhir yang saya cari. Gagasan melacak hanya berfungsi sebagai percobaan mental, jelas itu akan sangat tidak praktis, tetapi ilustratif; dan ide bungkusnya mengagumkan, dan terima kasih telah menunjukkan bagian "kembalikan ini". Salam.
David L
Kenapa tidak $('select').val(value).change()bekerja sepanjang waktu? Adakah penjelasan yang jelas?
Istiaque Ahmed
2

Saya memisahkannya, dan kemudian menggunakan perbandingan identitas untuk menentukan apa yang akan dilakukan selanjutnya. 

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

Karena jQuery tidak akan memicu acara perubahan asli tetapi hanya memicu acara perubahannya sendiri. Jika Anda mengikat acara tanpa jQuery dan kemudian menggunakan jQuery untuk memicunya, panggilan balik yang Anda ikat tidak akan berjalan!

Solusinya kemudian seperti di bawah ini (100% berfungsi):

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