เหตุการณ์การเปลี่ยนแปลงทริกเกอร์ () เมื่อตั้งค่าของ <select> ด้วยฟังก์ชัน val ()

วิธีใดเป็นวิธีที่ง่ายและดีที่สุดในการเรียกใช้เหตุการณ์การเปลี่ยนแปลงเมื่อตั้งค่าขององค์ประกอบที่เลือก

ฉันคาดหวังว่าจะรันโค้ดต่อไปนี้

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

หรือ

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

จะส่งผลให้เกิดเหตุการณ์การเปลี่ยนแปลงซึ่งฉันคิดว่าเป็นตรรกะที่ดีที่ต้องทำ ขวา?

มันไม่ใช่อย่างนั้น คุณต้องทำ triger change () เหตุการณ์โดยทำสิ่งนี้

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

หรือ

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

แต่ฉันกำลังมองหาวิธีแก้ปัญหาบางอย่างที่จะทำให้เกิดเหตุการณ์การเปลี่ยนแปลงทันทีที่ค่าของการเลือกถูกเปลี่ยนแปลงโดยรหัสจาวาสคริปต์

ฉันมีปัญหาที่คล้ายกันมากและฉันไม่ค่อยแน่ใจว่าคุณกำลังมีปัญหาอะไรเนื่องจากรหัสที่คุณแนะนำนั้นใช้ได้ดีสำหรับฉัน มันทันที (เป็นความต้องการของคุณ) ก่อให้เกิดการเปลี่ยนแปลงรหัสต่อไปนี้

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

จากนั้นฉันจะใช้ค่าจากฐานข้อมูล (ซึ่งใช้ในแบบฟอร์มสำหรับอินพุตใหม่และการแก้ไขระเบียนที่มีอยู่) ตั้งค่าเป็นค่าที่เลือกและเพิ่มส่วนที่ฉันขาดหายไปเพื่อเรียกใช้โค้ดด้านบน".change () ".

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

ดังนั้นถ้าค่าที่มีอยู่จากฐานข้อมูลเป็น 'N' มันจะซ่อนฟิลด์อินพุตสำรองในแบบฟอร์มของฉันทันที

สิ่งหนึ่งที่ฉันค้นพบ (วิธีที่ยาก) ก็คือคุณควรมี

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

กำหนดไว้ก่อนที่คุณจะใช้

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

หรือ

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

คำตอบที่ตรงมีอยู่แล้วในคำถามที่ซ้ำกัน: เหตุใดเหตุการณ์การเปลี่ยนแปลง jquery จึงไม่ทริกเกอร์เมื่อฉันตั้งค่าของการเลือกโดยใช้ val ()

ดังที่คุณอาจทราบว่าการตั้งค่าการเลือกไม่ได้ทำให้เกิดเหตุการณ์เปลี่ยนแปลง () หากคุณกำลังมองหาเหตุการณ์ที่เริ่มทำงานเมื่อค่าขององค์ประกอบถูกเปลี่ยนผ่าน JS จะไม่มีเลย

หากคุณต้องการทำสิ่งนี้จริงๆฉันคิดว่าวิธีเดียวคือการเขียนฟังก์ชันที่ตรวจสอบ DOM ในช่วงเวลาและติดตามค่าที่เปลี่ยนแปลง แต่อย่าทำเช่นนี้เว้นแต่คุณจะต้อง (ไม่แน่ใจว่าทำไมคุณถึงต้องทำ)

เพิ่มโซลูชันนี้:
อีกวิธีหนึ่งที่เป็นไปได้คือการสร้าง.val()ฟังก์ชัน Wrapper ของคุณเองและให้มันทริกเกอร์เหตุการณ์ที่กำหนดเองหลังจากตั้งค่าผ่าน.val()จากนั้นเมื่อคุณใช้ Wrapper .val () ของคุณเพื่อตั้งค่าของ<select>มันจะทริกเกอร์เหตุการณ์ที่คุณกำหนดเอง ซึ่งคุณสามารถดักจับและจัดการได้

ต้องแน่ใจว่าreturn thisมันเป็นแบบ chainable แบบ jQuery

เนื่องจาก jQuery จะไม่ทริกเกอร์เหตุการณ์การเปลี่ยนแปลงเนทีฟ แต่จะทริกเกอร์เหตุการณ์การเปลี่ยนแปลงของตัวเองเท่านั้น หากคุณผูกเหตุการณ์โดยไม่มี jQuery แล้วใช้ jQuery เพื่อทริกเกอร์การเรียกกลับที่คุณผูกไว้จะไม่ทำงาน!

วิธีแก้ปัญหาจะเป็นดังนี้ (ใช้งานได้ 100%):

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

ฉันแยกมันแล้วใช้การเปรียบเทียบตัวตนเพื่อกำหนดสิ่งที่จะทำต่อไป

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