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

Does anybody know how to get those thing works?

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

Does anybody know how to get those thing works?

• javascript
• jquery

Share Improve this question Follow edited Nov 1, 2017 at 13:29 phuwin asked Oct 7, 2015 at 12:14 phuwinphuwin 3,27055 gold badges2727 silver badges4949 bronze badges 1

• 1 Things actually work as they are designed. Think about a situation when you programmatically change a value in an onchange-handler, that change would trigger a new onchange, the value is changed again ... – Teemu Commented Oct 7, 2015 at 12:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Additional you can use .trigger():

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

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

<script src="https://ajax.googleapis./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. -->

You need to fire the event manually,

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

Fiddle

In your case it won't trigger change event, it is assignment, you have to call change event like. Change as follows
You have to use like 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." );
});