JavaScript实现下拉框选中值对应div显示的问题排查

• 你代码里的item变量是下拉菜单选中的字符串值（如t1/t2），并不是对应资费的DOM元素，直接对字符串操作style属性不会生效
• 原有逻辑没有处理其他未选中资费的隐藏逻辑，会出现多个资费DIV同时展示的问题
• 下拉菜单的默认选项没有设置空value，选中默认选项时没有对应的处理逻辑

修正后的完整代码 #

1. HTML调整 #

给默认选项加空value，避免取值异常：

<div>
    Value Selected: <span id="current"></span>
    <br><br>
    <select id="select" name="options">
        <option value="">Choose Your Option</option>
        <option value="t1">1</option>
        <option value="t2">2</option>
        <option value="t3">3</option>
        <option value="t4">4</option>
    </select>   
    <div class="t1"><p>Tariff 1</p></div>
    <div class="t2"><p>Tariff 2</p></div>
    <div class="t3"><p>Tariff 3</p></div>
    <div class="t4"><p>Tariff 4</p></div>
</div>

2. CSS调整 #

确保所有资费DIV默认都是隐藏状态：

.t1, .t2, .t3, .t4 {
    display: none;
}

3. JS调整 #

function showSelectedItem() {
    // 获取选中的value值
    var selectedVal = document.getElementById("select").value;
    document.getElementById("current").innerHTML = selectedVal;
    
    // 先把所有资费DIV都隐藏
    document.querySelectorAll('.t1, .t2, .t3, .t4').forEach(div => {
        div.style.display = 'none';
    });
    
    // 如果选中的不是默认空值，就显示对应DIV
    if (selectedVal) {
        document.querySelector('.' + selectedVal).style.display = 'block';
    }
}

document.getElementById("select").addEventListener("change", showSelectedItem);

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