jQuery事件委托场景下如何动态选择size_select元素更新内容

安全阿岳

2026-10-6

jQuery 动态关联联动下拉框实现方案

可以通过动态方式定位要更新的.size_select元素，核心是提前存储触发事件的颜色选框实例，避免全局选择器命中页面所有同类型元素的问题。

实现注意事项

jQuery ajax的success回调中默认this指向ajax请求配置对象，而非触发change事件的.color_select元素，因此需要在回调外先存储当前触发事件的元素实例。

常用实现代码

$(document).on('change', '.color_select', function() {
    // 存储当前触发事件的颜色选框实例
    const $currentColorSelect = $(this);
    const id = $currentColorSelect.val();
    
    $.ajax({
        type:'POST',
        url: "functions/getSize.php",
        data: {'id': id},
        success:function(data){
            // 场景1：.size_select是当前颜色选框的直接同级兄弟元素
            $currentColorSelect.siblings('.size_select').html(data);

            // 场景2：两个选框属于同一个父容器（比如class为item_group的div），非直接兄弟
            // $currentColorSelect.closest('.item_group').find('.size_select').html(data);

            // 场景3：通过自定义属性关联，比如.color_select加了data-target="#size_1"属性指定对应尺寸选框
            // const targetSelector = $currentColorSelect.data('target');
            // $(targetSelector).html(data);
        }
    });
});