Woocommerce中选择select2下拉「Yes」选项时显示指定Div的实现问题

核心问题说明 #

你之前的代码逻辑失效主要有两个原因：

• 错误使用val()匹配选中值，你需要匹配的是选中项的显示文本而非value属性值
• 原生change事件对懒加载渲染的select2组件适配性不足

可行实现代码 #

方案1：使用select2官方事件（推荐） #

jQuery(function($) {
    // 封装显隐控制逻辑，可复用
    function toggleUploadBlock() {
        // 获取当前选中项的文本内容，去除首尾空格
        const selectedText = $('.select2 option:selected').text().trim();
        // 匹配文本为Yes时显示上传区块，否则隐藏
        $('.wc-dnd-file-upload').toggle(selectedText === 'Yes');
    }

    // 页面加载完成后先执行一次，适配默认选中值的场景
    toggleUploadBlock();

    // 监听select2的选中/取消选中事件，动态触发显隐判断
    $(document).on('select2:select select2:unselect', '.select2', function() {
        toggleUploadBlock();
    });
});

这个方案的优势是直接适配select2的官方事件机制，不会因为组件的动态渲染特性导致监听失效，逻辑更稳定。

方案2：监听渲染后的li点击事件 #

如果方案1不生效，可直接监听select2渲染出来的下拉选项点击事件：

jQuery(function($) {
    // 页面初始化先判断默认选中状态
    const initSelectedText = $('.select2 option:selected').text().trim();
    $('.wc-dnd-file-upload').toggle(initSelectedText === 'Yes');

    // 监听下拉选项的点击事件
    $(document).on('click', '.select2-results__option', function() {
        const clickText = $(this).text().trim();
        $('.wc-dnd-file-upload').toggle(clickText === 'Yes');
    });
});

内容的提问来源于stack exchange，提问作者PoppySDev