通过.val（）的Jquery set select选项不会触发（'change'，）

Question

JS小提琴

<select id="panel" >
    <option value=1>One</option>
    <option value=2>Two</option>
    <option value=3>Three</option>
</select> 
<button id="button">Click me</button> <br> 

$('#button').click(function(){
  $('#panel').val(3); 
}); 
$('#panel').on('change',function(){
  alert('Hi'); 
});

有人知道如何使这些东西有效吗？

Answer 1

您还可以使用.trigger（） ：

描述：执行附加到给定事件类型的匹配元素的所有处理程序和行为。

 $('#button').click(function() { $('#panel').val(3).trigger("change"); }); $('#panel').on('change', function() { alert('Hi'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="panel"> <option value=1>One</option> <option value=2>Two</option> <option value=3>Three</option> </select> <button id="button">Click me</button> <!--click will change the select. But it doesnt fire the on change function. --> 

Answer 2

您需要手动触发事件，

$('#panel').val(3).change();

小提琴

Answer 3

在你的情况下，它不会触发更改事件，它是赋值，你必须调用更改事件。 改变如下
你必须像HTML一样使用：

<select class="panel" >
                                                                                   <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
                                                                                </select> 
<button id="button">Click me</button> <!--click will change the select. But it doesnt fire the on change function. -->

JQUERY：

$('#button').click(function(){
    $('.panel').val(3);
    $( ".panel" ).change();
});
 $( ".panel" ).change(function() {
  alert( "Handler for .change() called." );
});