使用JavaScript DOM添加下拉框选中项至列表时遇错误求修复

错误原因分析 #

1. display函数未定义：你在<select>的onchange属性里调用了display(this)，但这个函数只存在于addEventListener的回调内部，全局作用域找不到它，所以触发引用错误。
2. 事件绑定对象错误：给每个<option>绑定change事件无效，change事件应该绑定在<select>元素上，选择器本身才是触发选择变化的主体。
3. 循环变量错误：循环里写的option.addEventListener，但option变量未定义，应该用options[i]，不过这个操作本身完全没必要。
4. 缺少添加购物项的逻辑：原代码只打印了选中值，没有实现把选中项添加到<ul>购物清单的核心功能。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<body>
    <h1>Shopping List</h1>
    <select id="select_item">
        <option value="NoteBook">Notebook</option>
        <option value="Jello">Jello</option>
        <option value="Spinach">Spinach</option>
        <option value="Rice">Rice</option>
        <option value="Birthday Cake">Birthday Cake</option>
        <option value="Candles">Candles</option>
    </select>

    <p>Shopping Cart:</p>
    <ul id="shopList"></ul>

    <script>
        // 获取选择器和购物清单元素
        const select = document.getElementById('select_item');
        const shopList = document.getElementById('shopList');

        // 给选择器绑定change事件
        select.addEventListener('change', function(e) {
            const selectedValue = e.target.value;
            // 创建li元素并设置文本
            const li = document.createElement('li');
            li.textContent = selectedValue;
            // 将li添加到购物清单
            shopList.appendChild(li);
        });
    </script>
</body>
</html>

关键修改说明 #

• 删掉了<select>上的onchange="display(this)"，改用JS直接绑定事件，避免全局函数依赖。
• 直接给<select>元素绑定change事件，每次选择变化时触发回调。
• 在回调里创建<li>元素，设置文本为选中的值，然后追加到购物清单的<ul>里，实现添加功能。
• 去掉了无用的options遍历和错误的事件绑定，简化代码逻辑。

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