如何基于JavaScript数组生成的下拉框动态输出HTML内容？

问题分析 #

你的代码存在两个核心问题：

1. 数组语法错误：地点数组里的分隔符用了分号;，JavaScript数组元素必须用逗号,分隔，否则会直接报错。
2. 缺少事件监听：当前的运费判断逻辑只在页面加载时执行一次，没有监听下拉框的选中变化事件，所以切换选项时不会触发更新。

修正后的完整代码 #

HTML（无需修改）

<select name="city" id="city">
    <option value="-">Choose city</option>
</select>

<p>Your estimated shipping cost: </p>
<p id="output"></p>

JavaScript

// 获取下拉框元素
var select_city = document.getElementById("city");
// 修正数组分隔符为逗号
var city = ["Location 1","Location 2","Location 3"];

// 初始化下拉选项
for(var i = 0; i < city.length; i++) {
    let opt = city[i];
    let el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select_city.appendChild(el);
};

// 封装运费计算逻辑为函数
function updateShippingCost() {
    var chosen_city = select_city.options[select_city.selectedIndex].value;
    var output = document.getElementById("output");
    
    if (chosen_city === "-") {
        output.textContent = ""; // 未选择时清空
    } else if (chosen_city === "Location 1") {
        output.textContent = "10 USD";
    } else if (chosen_city === "Location 2") {
        output.textContent = "20 USD";
    } else {
        output.textContent = "30 USD";
    }
}

// 绑定下拉框change事件，选中变化时触发更新
select_city.addEventListener("change", updateShippingCost);

// 页面加载时初始化一次（可选）
updateShippingCost();

关键改动说明 #

• 修复数组语法：把数组里的分号改成逗号，避免JS语法报错。
• 封装逻辑为函数：把运费判断的代码放到updateShippingCost函数里，方便重复调用。
• 添加change事件监听：给下拉框绑定change事件，每次选中项变化时自动执行函数更新运费。
• 优化默认状态：增加未选择地点时的处理，清空输出内容，体验更友好。

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