ComboBox选中值无法同步至Input输入框，求问题排查与解决

1. 致命拼写错误 #

你代码里的document.getElementByID()是错误写法，正确的DOM方法名是document.getElementById()（注意最后一个字母是小写的d）。这个拼写错误会导致浏览器无法识别该方法，函数直接失效。

修正后的函数：

function choiceMade(choice) {
    document.getElementById("courseName").value = choice;
}

2. 多选下拉框的this.value局限性 #

你的<select>设置了multiple属性（支持多选），但this.value只能返回第一个选中的选项值，如果用户选中多个选项，输入框只会显示第一个选中项。如果要支持多选并展示所有选中内容，需要调整逻辑：

先修改<select>的事件传参：

<select id="courses" multiple size="3" onchange="choiceMade(this);">

再更新函数逻辑：

function choiceMade(selectEl) {
    // 提取所有选中的非空值并拼接成字符串
    const selectedVals = Array.from(selectEl.selectedOptions)
        .map(opt => opt.value)
        .filter(val => val)
        .join(", ");
    document.getElementById("courseName").value = selectedVals;
}

额外排查建议 #

• 确认JS代码放在<script>标签中，且位置在HTML元素之后（或者用DOMContentLoaded事件包裹），避免DOM还未加载就执行代码。
• 按F12打开浏览器控制台，查看是否有报错信息，这是快速定位前端问题的关键方式。

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