เหตุการณ์การเปลี่ยนแปลงทริกเกอร์ <select> โดยใช้ jquery

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

ฟังก์ชั่นที่ดำเนินการโดยการเพิ่มทริกเกอร์หลังจากเชื่อมโยงฟังก์ชันกับเหตุการณ์

ฉันพยายามที่จะแสดงผลออกมาเช่นนี้

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/

ใช้val()เพื่อเปลี่ยนเป็นค่า (ไม่ใช่ข้อความ) และtrigger()เพื่อดำเนินการเหตุการณ์ด้วยตนเอง

จะต้องประกาศตัวจัดการเหตุการณ์การเปลี่ยนแปลงก่อนที่จะทริกเกอร์

นี่คือตัวอย่าง

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');

ในการเลือกตัวเลือกให้ใช้.val('value-of-the-option')องค์ประกอบที่เลือก ที่จะเรียกองค์ประกอบการเปลี่ยนแปลงให้ใช้หรือ.change().trigger('change')

ปัญหาในรหัสของคุณคือเครื่องหมายจุลภาคแทนที่จะเป็นจุดใน$('.check'),trigger('change');และความจริงที่ว่าคุณเรียกมันก่อนที่จะผูกตัวจัดการเหตุการณ์

$('#edit_user_details').find('select').trigger('change');

มันจะเปลี่ยนเลือก HTML id="edit_user_details"แท็กรายการแบบหล่นลงกับ

อีกวิธีการแก้ปัญหาการทำงานสำหรับผู้ที่ถูกบล็อกด้วย jQuery trigger handler ที่การดับไฟของเหตุการณ์ในท้องถิ่นจะเป็นดังนี้ (ทำงานได้ 100%):

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

ให้ลิงก์ในค่าของแท็กตัวเลือก

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>

หากคุณต้องการตรวจสอบบางอย่างแล้วใช้วิธีนี้

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>

ขึ้นอยู่กับคำตอบของ Mohamed23gharbi:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

ในกรณีของฉันที่องค์ประกอบถูกสร้างขึ้นโดย vue นี่เป็นวิธีเดียวที่ใช้งานได้

คุณสามารถลองรหัสด้านล่างเพื่อแก้ปัญหาของคุณ:

โดยค่าเริ่มต้นตัวเลือกแรกเลือก: jQuery ('เลือก'). find ('ตัวเลือก') [0] .selected = true;

ขอบคุณ Ketan T