实现下拉框相同值重复插入至文本域的需求及问题解决请求

嘿，这个问题我太熟啦！你遇到的核心问题是下拉框的change事件只有在选中值发生变化时才会触发——当你重复选择同一个选项时，因为选中值没改变，change事件根本不会执行，所以插入逻辑就跑不起来。

解决思路 #

我们需要把触发逻辑从change事件换成能响应每次点击选项的事件，比如mousedown（因为点击选项时一定会触发这个事件，不管是不是当前选中的）。同时要保留你原来的光标位置处理逻辑，确保插入后光标能正确定位到插入内容的末尾。

修改后的JavaScript代码 #

// 绑定mousedown事件到所有下拉选项
$('.variables_select').on('mousedown', 'option', function(e) {
    // 阻止默认行为，避免选中状态提前更新导致判断出错
    e.preventDefault();
    
    var $select = $(this).closest('.variables_select');
    var selectedValue = $(this).val();
    
    // 跳过默认的空选项
    if (!selectedValue) return;
    
    // 找到对应的textarea
    var $textarea = $select.closest('.panel-body').find('textarea');
    var cursorPosStart = $textarea.prop('selectionStart');
    var cursorPosEnd = $textarea.prop('selectionEnd');
    var v = $textarea.val();
    var textBefore = v.substring(0, cursorPosStart);
    var textAfter = v.substring(cursorPosEnd, v.length);
    
    // 插入变量
    var insertText = '{{' + selectedValue + '}}';
    $textarea.val(textBefore + insertText + textAfter);
    
    // 更新光标位置
    var newCursorPos = cursorPosStart + insertText.length;
    $textarea.prop('selectionStart', newCursorPos);
    $textarea.prop('selectionEnd', newCursorPos);
    
    // 手动设置下拉框的选中值（因为我们阻止了默认行为）
    $select.val(selectedValue);
});

代码说明 #

1. 事件替换：把原来的change事件换成绑定在option上的mousedown事件，确保每次点击选项都会触发插入逻辑。
2. 阻止默认行为：e.preventDefault()避免浏览器提前更新下拉框的选中状态，保证我们能正确获取点击的选项值。
3. 手动设置选中值：因为阻止了默认行为，所以需要手动把下拉框的选中值设置为点击的选项，保持界面显示正确。
4. 保留光标逻辑：完全保留了你原来的光标位置处理，插入后光标会自动定位到插入内容的末尾，提升用户体验。

额外优化（可选） #

如果你希望用户也能通过键盘选择重复插入（比如用上下键选中同一个选项），可以再加上input事件的监听，不过一般鼠标点击是最常用的场景，上面的代码已经能解决你的核心问题啦。

测试一下：现在不管你重复点击多少次同一个选项，对应的变量都会被插入到文本域中，完美解决你遇到的问题！

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