jQuery使用.val()设置下拉选项不会触发.on('change', )事件

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'); 
});

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

- phuwin

---

事情实际上是按照它们被设计的方式运作的。想象一下这样一种情况，当您在onchange处理程序中以编程方式更改值时，该更改将触发新的onchange，该值再次更改... - Teemu

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. -->

- Alex Char

---

在 .trigger('change') 和 change() 之间，哪一个更好？ - phuwin

在你的例子中是一样的。 - Alex Char

Answer 2

你需要手动触发事件。

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

Fiddle

- Anoop Joshi P

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

- Arun