如何在jQuery Chosen插件新增选项时仅更新隐藏输入框？

为什么直接绑定点击事件无效？ #

你遇到的是典型的动态DOM元素事件绑定问题：.create-option.active-result是Chosen在用户输入后动态生成的元素，页面初始加载时它并不存在，所以直接用$('.create-option.active-result').click()绑定事件不会生效——因为绑定动作执行时，目标元素还没被创建出来。

方案1：使用事件委托绑定点击事件 #

我们可以把事件委托给已经存在的父元素（比如Chosen生成的容器，甚至document），当点击事件冒泡到父元素时，再判断触发事件的目标是否是我们需要的“Add option”元素。

推荐的高效写法（委托给Chosen容器）

Chosen会在原select元素后面生成一个带有.chosen-container类的容器，直接委托给这个容器更高效：

// 绑定到Chosen的容器，减少事件冒泡范围
$('#element').next('.chosen-container').on('click', '.create-option.active-result', function() {
    // 从li文本中拆分出用户输入的新增选项内容
    var newOptionText = $(this).text().split(': ')[1];
    // 更新你的隐藏输入框
    $('#your-hidden-input-id').val(newOptionText);
    
    // 如果需要确保Chosen渲染最新选项，可手动触发更新
    // $('#element').trigger('chosen:updated');
});

通用写法（委托给document）

如果不确定Chosen容器的结构，也可以直接委托给document：

$(document).on('click', '.create-option.active-result', function() {
    var newOptionText = $(this).text().replace('Add option: ', '');
    alert('新增的选项内容：' + newOptionText);
    // 执行隐藏输入框更新逻辑
});

方案2：检测选择列表长度变化（MutationObserver） #

如果你想通过监听选项数量变化来触发更新，可以使用浏览器原生的MutationObserverAPI，它能监听DOM元素的子节点变化（比如新增了option元素）：

var $select = $('#element');
var selectDom = $select[0];
var previousOptionCount = $select.find('option').length;

// 创建观察者实例
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // 检测是否有新的option被添加
        if (mutation.addedNodes.length > 0) {
            var currentOptionCount = $select.find('option').length;
            if (currentOptionCount > previousOptionCount) {
                // 获取最新添加的选项文本
                var newOptionText = $(mutation.addedNodes[0]).text();
                // 更新隐藏输入框
                $('#your-hidden-input-id').val(newOptionText);
                // 更新计数
                previousOptionCount = currentOptionCount;
            }
        }
    });
});

// 配置观察者：监听select的子节点变化
observer.observe(selectDom, { childList: true });

另外，也可以结合Chosen提供的chosen:updated事件，当Chosen更新选项后会触发这个事件：

$('#element').on('chosen:updated', function() {
    var optionCount = $(this).find('option').length;
    console.log('当前选项数量：' + optionCount);
    // 这里可以结合之前保存的计数，判断是否新增了选项并更新输入框
});

小提示 #

当用户点击“Add option”后，Chosen会自动把新选项添加到原select元素中，你也可以在点击事件中延迟一点获取原select的最后一个option文本，确保准确性：

$('#element').next('.chosen-container').on('click', '.create-option.active-result', function() {
    // 延迟100ms，确保Chosen完成选项添加操作
    setTimeout(function() {
        var lastOptionText = $('#element').find('option:last').text();
        $('#your-hidden-input-id').val(lastOptionText);
    }, 100);
});

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