How to make onChange event work on pre-selected data from database not from user action Jquery

Viewed 185

So I have Select code like this:

<select name="id_service" id="wagan" class="form-control" required="">
    <option selected="" disabled="" value="">-Pilih Cok-</option>
    <option value="1" data-yuyu="1" data-service="Berlangganan" selected="">Berlangganan</option>
    <option value="2" data-yuyu="2" data-service="One Time Charge">One Time Charge</option>
    <option value="3" data-yuyu="3" data-service="Bandwith On Demand">Bandwith On Demand</option>                                                            
</select>

There are 3 data item options, and they have values ​​1, 2 and 3. And I attached a Listener to that element with this code:

$('#wagan').change(function(){
    var dayu = $('#wagan option:selected').attr('data-yuyu');
      
        if (dayu == '1'){
            // Do something when the value is 1
        }else if(dayu == '2'){
            // Do something when the value is 2
        }else if(dayu == '3'){
            // Do something when the value is 3
        };
});

If the user chooses and commits the change by his own action, .change can work. But if I set it earlier using:

$("#wagan").val("2").change(function(){
    // Do something after value is set to value 2
}

It doesn't work.

I've read in the Jquery source, that:

Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.

How to get it done?
How do I set the value first and run the onChange function also?
Thanks for any help

1 Answers

You can trigger the event yourself with trigger:

$("#wagan").val("2").trigger("change");

Documentation

Related