<select> değerini val () işleviyle ayarlarken değiştirme () olayını tetikleyin

132

Select öğesinin değerini ayarlarken değişiklik olayını tetiklemenin en kolay ve en iyi yolu nedir .

Aşağıdaki kodu çalıştırmayı bekliyordum

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

veya

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

Bu, yapılması gereken oldukça mantıklı bir şey olduğunu düşündüğüm değişiklik olayının tetiklenmesine neden olur. Sağ?

Eh, durum böyle değil. Bunu yaparak change () olayını tetiklemeniz gerekir

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

veya

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

ancak select değeri bazı javascript koduyla değiştirilir değiştirilmez değişiklik olayını tetikleyecek bir çözüm arıyorum.

— Goran Radulovic
kaynak

saf javascript element.addEventListener?

— Manuel Bitto

4

$ ( 'select # bazı') val (10) .change ().; kullanıcı için hemen hemen anında.

— Dimitri

@Manuel bunu denedim. iv'e, object.change = function (.... ve object.addEventListener (... ama hiçbiri object.value, $ (object) .val () ve $ (object) .attr ('value') kullanıldı bu listeyi tetiklerdi

— Goran Radulovic

124

Çok benzer bir sorun yaşadım ve önerdiğiniz kod benim için harika çalıştığı için neyle ilgili sorun yaşadığınızı tam olarak bilmiyorum. O hemen (senin bir gereklilik) Aşağıdaki değişim kodunu tetikler.

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

Ardından değeri veritabanından alırım (bu, hem yeni girdi hem de mevcut kayıtları düzenlemek için bir formda kullanılır), onu seçilen değer olarak ayarlar ve eksik olan parçayı yukarıdaki kodu tetiklemek için eklerim , ".change () ".

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

Böylece veritabanındaki mevcut değer 'N' ise, formumdaki ikincil giriş alanını hemen gizler.

— criticman
kaynak

Bu tam olarak ihtiyacım olan şey. DOM olay işleyicilerini dinamik olarak nasıl tetikleyeceğinizi keşfetmenin en iyi yolu nedir? JQuery bunu iyi belgeliyor mu? Teşekkür ederim!

— Con Antonakos

2

$ ("# indirimli_tür") .val (2) .trigger ('değiştir');

— Satanand Tiwari

$ ( '# add_itp_spt_parent_id') val (add_fpt_val) .trigger ( 'değişim.'); $ ( '# add_itp_spt_parent_id') değişiklik ().; her iki çözüm de çalışmıyor.

— Kamlesh

tanımlı değişiklik fonksiyonu kullanmadan ÖNCE sorunumu çözdüm. Teşekkürler.

— Kamlesh

45

Öğrendiğim bir şey (zor yoldan), sahip olmalısın

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

kullanmadan ÖNCE tanımlanmış

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

veya

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

— Dima R.
kaynak

4

Eski gönderi ama bu sorunumu çözdü, beni uzun soluklu beyin çatlaklarından kurtardı ... Kullanmadan önce dinleyiciyi tanımlamalısın. Saf JavaScript'te bile.

— Temitayo

Biraz detaylandırır mısınız? "Change ()" bu nedenle yok mu?

— Dima R.

Pekala diyeceğim, belki bu tür dinleyiciler yük altında kaldırılmıyor, Projemde change()dinleyiciyi tanımlamadan önce aradım ve change()aramayı dinleyicinin altına taşıyana kadar çalışmadı ve çalıştı. Pekala, bunun bir sorun olmaması gerektiğini söyleyeceğim, bu sadece kodunuzu yapılandırma şeklinizle ilgili.

— Temitayo

1

İhtiyacım olan şey bu. Bu sorunu çözmek sonsuza kadar aldı, teşekkürler.

— Jamie M.

Bravo!!! "kullanmadan ÖNCE tanımlı değişiklik fonksiyonu", sorunumu çözdü. Teşekkürler canım.

— Kamlesh

17

Düz yanıt zaten yinelenen bir soruda: val () kullanarak bir select değerini ayarladığımda jquery değişiklik olayı neden tetiklenmiyor?

Muhtemelen bildiğiniz gibi, select değerinin ayarlanması, change () olayını tetiklemez, eğer bir öğenin değeri JS ile değiştirildiğinde tetiklenen bir olay arıyorsanız, bir tane yoktur.

Bunu gerçekten yapmak istiyorsanız, sanırım tek yol, DOM'u bir aralıkta kontrol eden ve değişen değerleri izleyen bir işlev yazmaktır, ancak yapmanız gerekmedikçe kesinlikle bunu yapmayın (neden buna ihtiyacınız olduğundan emin değilsiniz)

Bu çözüm eklendi:
Başka bir olası çözüm, kendi .val()sarmalayıcı işlevinizi oluşturmak ve değeri ayarladıktan sonra özel bir olayı tetiklemektir .val(), ardından bir .val () sarmalayıcınızı bir değerin değerini ayarlamak <select>için kullandığınızda özel etkinliğinizi tetikleyecektir. tuzağa düşürebilir ve idare edebilirsin.

Emin olun return this, böylece jQuery tarzında zincirlenebilir

— Clarence Liu
kaynak

Bu soru üzerine birkaç forum okudum ve cevabınız aradığım son tamamlamaydı. İzleme fikri yalnızca zihinsel bir deney olarak çalışır, açıkçası kesinlikle pratik olmazdı, ama açıklayıcıdır; ve paketleyici fikri harika ve "bunu iade et" kısmına işaret ettiğiniz için teşekkür ederiz. Saygılarımızla.

— David L

Neden her zaman $('select').val(value).change()çalışmıyor? Net bir açıklama var mı?

— Istiaque Ahmed

2

Onu ayırıyorum ve sonra ne yapılacağını dikte etmek için bir kimlik karşılaştırması kullanıyorum.

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

— Beaumont
kaynak

2

JQuery yerel değişiklik olayını tetiklemeyeceği için yalnızca kendi değişiklik olayını tetikler. Olayı jQuery olmadan bağlarsanız ve ardından onu tetiklemek için jQuery kullanırsanız, bağladığınız geri aramalar çalışmaz!

Çözüm daha sonra aşağıdaki gibidir (% 100 çalışıyor):

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

— Mohamed23gharbi
kaynak