JavaScript实现下拉选择框动态选项的添加与更新

你遇到的问题是每次点击下拉框都会重复追加选项，而非根据文本框最新值更新选项。核心解决思路是先清空下拉框的旧选项，再基于当前文本框的值重新生成新选项，替代appendTo()的追加逻辑。

修改后的代码实现 #

let selectAnswer = document.getElementById('answer-' + index);
selectAnswer.addEventListener("click", function() {
    // 1. 先清空下拉框所有旧选项
    const $select = $('#answer-' + index);
    $select.empty();

    // 2. 获取文本框的最新值
    const optionAValue = $question.find('#optionA-' + index).val();
    const optionBValue = $question.find('#optionB-' + index).val();
    const optionCValue = $question.find('#optionC-' + index).val();
    const optionDValue = $question.find('#optionD-' + index).val();

    // 3. 整理选项值为数组，循环生成新选项（优化重复代码）
    const options = [optionAValue, optionBValue, optionCValue, optionDValue];
    options.forEach(value => {
        // 可选：过滤空值，避免生成空白选项
        if (value.trim()) {
            $('<option>').val(value).text(value).appendTo($select);
        }
    });
});

关键说明 #

• empty()清空旧选项：这是解决重复追加的核心步骤，确保每次点击都从空白状态生成新选项。
• 空值过滤：如果文本框可能为空，通过判断可以避免下拉框出现无意义的空白选项。
• 为何不用{once: true}：该配置仅让事件触发一次，但如果用户修改文本框值后，点击下拉框需要同步更新选项，显然只执行一次无法满足需求，清空重建的方式更适配动态更新的场景。

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