如何用JavaScript和HTML实现点击下拉选项后在下方展示选中值

云上老周

2026-9-29

你只需要给下拉选择框绑定change事件，监听用户选择动作，拿到选中值后更新到下方的段落元素即可。
我在原有代码基础上做了两处优化：一是新增选择事件处理逻辑，二是避免用户多次点击按钮重复添加选项。

修改后的完整JS代码

var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"];

// 下拉选择触发的处理函数
function handleSelectChange() {
    const currentValue = select.value;
    // 处理默认选中项的展示内容
    if (currentValue === '1') {
        down.textContent = '请选择课程';
        return;
    }
    down.textContent = `你选中的课程是：${currentValue}`;
}

// 给下拉框绑定change事件监听
select.addEventListener('change', handleSelectChange);

// 原有渲染选项的函数
function GFG_Fun() {
    // 清空之前渲染的自定义选项，仅保留默认的"Select Course"
    select.options.length = 1;
    for (var i = 0; i < gr10.length; i++) {
        var optn = gr10[i];
        var el = document.createElement("option");
        el.textContent = optn;
        el.value = optn;
        select.appendChild(el);
    }
    down.innerHTML = "Elements Added";
}