Manually trigger select's change event by another triggered change event
HTML
<select>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<select>
<option value="a">Value A</option>
<option value="b">Value B</option>
<option value="c">Value C</option>
</select>
<div id="console">Second select triggered: <span>0</span> times</div>
JavaScript
$(document).ready(function () {
$('select').first().change(function () {
var $otherSelect = $('select').eq(1);
switch ($(this).val()) {
case '1':
$otherSelect.val('a');
break;
case '2':
$otherSelect.val('b');
break;
case '3':
$otherSelect.val('c');
break;
default:
break;
}
$otherSelect.change();
});
var count = 0;
$('select').eq(1).change(function () {
$('#console span').html(++count);
});
$('select').first().trigger('click');
});