How to make onChange() work when you change it via jQuery?

Question

I have a select list.

<select id="cars">
<option value="Toyota">Toyota</option>
<option value="Subaru">Subaru</option>
<option value="Fiat">Fiat</option>
</select>

The onchange works well if you select the option by yourself.

$('#cars').on('change', function (e) {
var valueSelected = this.value;
alert(valueSelected);
});

However, if you use jquery to select a value;

$("#cars").val("Toyota");

It changes the option, but it doesnt trigger the jquery function. What is the correct approach to trigger that ?

have you tried $('#cars').trigger('change')... EDIT: nevermind, answered below — Antonio Manente, Jan 05 '16 at 19:09

score 4 · Accepted Answer · answered Jan 05 '16 at 19:08

Use trigger

$('#cars').on('change', function(e) {
  var valueSelected = this.value;
  console.log(valueSelected);
});

$("#cars").val("Toyota");
$("#cars").trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="cars">
  <option value="Toyota">Toyota</option>
  <option value="Subaru">Subaru</option>
  <option value="Fiat">Fiat</option>
</select>

How to make onChange() work when you change it via jQuery?

1 Answers1