javascript - 如何使 onChange 事件对来自数据库而不是来自用户操作 Jquery 的预选数据起作用

Question

所以我有这样的选择代码:

<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>

有3个数据项选项，它们的值分别为1、2和3。
我使用以下代码将监听器附加到该元素:

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

如果用户通过自己的操作选择并提交更改，.change能行得通。
但是如果我早点设置它使用:

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

它不起作用。
我读过 Jquery来源，即:

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

如何完成？
如何首先设置值并运行 onChange 函数？
谢谢你的帮助

Answer 1

您可以使用 trigger 自己触发事件:

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

Documentation