根据下拉框选中条件切换元素样式的问题排查与实现

原代码的核心问题 #

1. 条件判断完全错误
   • city是数组，不存在city.value这个属性，所以this.value == city.value永远为假；
   • this.value == !"b"的写法逻辑混乱：!"b"会被JavaScript转换为布尔值false，而下拉框的value是字符串类型，两者不可能相等，导致整个判断条件永远不成立，output元素始终处于隐藏状态。
2. 逻辑运算符使用错误
   你需要选中"a"或"c"时显示元素，但原代码用了&&（逻辑与），这要求同时满足两个条件才能触发，而下拉框只能选择一个选项，这个逻辑从根本上就不成立。

修正后的实现代码 #

HTML（无需修改）

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

<span id="output">指定显示内容</span>

CSS（无需修改）

#output {
    display: none;
}

JavaScript（修正核心逻辑）

var city = ["a","b","c"];

// 填充下拉框选项
var select_city = document.getElementById("city");

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);
};

// 控制元素显示隐藏
var output = document.getElementById("output");

select_city.onchange = function() {
    // 判断选中的值是a或c时显示，否则隐藏
    output.style.display = (this.value === "a" || this.value === "c") ? "block" : "none";
};

额外优化建议 #

如果后续需要添加更多需要显示的选项，可以把这些值放到一个数组里，用includes方法判断，扩展性更好：

var showValues = ["a", "c"];
select_city.onchange = function() {
    output.style.display = showValues.includes(this.value) ? "block" : "none";
};

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