jQuery的设置由.VAL选择选项（）不会触发（ '变化'，）

Question

JS Fiddle

<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(); 

Fiddle

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."); 
});