JQuery动态修改select值后，如何触发事件更新关联控件？

问题说明 #

为name为itemName的select控件绑定了input事件，用户手动选择选项时能正常触发事件，更新关联的value_media输入框和unit_media下拉框内容；但通过jQuery动态修改该select的选中状态时，事件不会自动触发，导致关联字段无法更新。

原因分析 #

jQuery通过.val()或动态修改option列表的方式改变select值时，默认不会触发input或change事件，这类事件仅在用户手动交互时触发。

解决方案 #

1. 抽离事件处理逻辑为独立函数 #

将原来的事件处理代码封装成可复用函数，避免重复代码，同时方便手动调用：

function updateItemMediaFields($itemSelect) {
    var itemID = $itemSelect.val();
    var activity = $('#activity').val();
    var seasonID = $('#seasonID').val();
    var $bodyItem = $itemSelect.parents('.body-item');

    if (itemID) {
        $.ajax({
            type: 'POST',
            url: '?syspath=ajax&controller=ajax&action=getActItemDose',
            data: { 
                'itemId': itemID, 
                'itemType': activity, 
                'seasonID': seasonID  
            },
            success: function(data) {
                var object = JSON.parse(data);
                var value = object.itemValue;
                var unit = object.itemUnit;

                $bodyItem.find('[name="value_media"]').val(value);
                $bodyItem.find('[name="unit_media"]').val(unit);     
            }
        });            
    } else {
        $bodyItem.find('[name="value_media"]').val(0);
        $bodyItem.find('[name="unit_media"]').val('');
    }
}

2. 修改事件绑定 #

同时监听change和input事件，覆盖更多触发场景，并调用抽离的函数：

$(document).on('change input', '[name="itemName"]', function() {
    updateItemMediaFields($(this));
});

3. 动态修改select后手动触发事件 #

在动态生成itemName选项的AJAX回调中，设置完option列表后手动触发change事件，强制更新关联字段：

$('#activityNum').on('change', function() {
    var itemNumID = $('#activityNum').val();
    var actID = $('#activity').val();
    var sraID = $('#sraID').val();
    var seasonID = $('#seasonID').val();
    
    if (itemNumID) {
        $.ajax({
            type: 'POST',
            url: '?syspath=ajax&controller=ajax&action=getActNumSRA',
            data: { 
                'activitiyNum': itemNumID, 
                'sraID': sraID, 
                'seasonID': seasonID,
                'DetAct': actID 
            },
            success: function(html) {
                $('#itemName').html(html);
                // 手动触发change事件，更新关联字段
                $('#itemName').trigger('change');
            }
        });
    } else {
        $('#itemName').html('<option value="">Select Activity number first</option>');
        // 清空选项后触发事件，重置关联字段
        $('#itemName').trigger('change');
    }
});

关键优化点 #

• 函数封装：将重复逻辑抽离，提升代码可维护性，同时支持手动调用。
• 手动触发事件：解决动态修改select时事件不自动触发的问题。
• 事件监听扩展：同时监听change和input事件，兼容不同交互场景。

内容的提问来源于stack exchange，提问作者Muhammad Faiz Abdullah