Change Select value with Jquery

Question

I'm trying to use Jquery to change the value from a "select" input in a form, but when it changes, the function for that change doesn't work.

HTML:

<select id='select'>
  <option checked value='1' >Option 1</option>
  <option value='2' >Option 2</option>
</select>
<div id='text'>Option 1 selected</div>
<div id='button'>Click to select Option 2</div>

JQuery:

$('#select').change(function(){
    if($(this).val() == '1'){
    $('#text').text('Option 1 selected');
  } else if($(this).val() == '2'){
    $('#text').text('Option 2 selected');
  }
});

$('#button').click(function(){
    $('#select').val('2');
})

CSS:

#button {
  cursor: pointer;
  color: white;
  background: red;
  padding: 5px;
  display: inline-block;
}

Demo: https://jsfiddle.net/fdko9nna/

When I click the #buttondiv, it changes the select field, but the function that changes the #text it's not executed.
Thanks.

Answer 1

You need to trigger the change event with either .change() or trigger('change') in your button's code:

$('#button').click(function(){
    $('#select').val('2').change();
})

The change event you bound to the select doesn't get triggered by changing the value via jQuery alone, so you need to invoke jQuery's change event.

jsFiddle example