如何用JavaScript实现下拉菜单的逐级触发显示功能

首先要修正原HTML的一个问题：所有<select>元素使用了相同的id="tableCustomers"，这不符合HTML规范（id必须唯一），会导致JavaScript无法精准定位元素，所以先调整HTML结构：

<div class="row">            
    <div class="col-md-4 dropdown-container" id="customer-container">
        <label for="selectCustomers">Customer Select</label>
        <select class="form-control pointer" name="tableCustomers" id="selectCustomers" style="font-size:100%" >
            <option id="nothing" value="">---Select---</option>
            <option id="1" value="1" >1</option>
            <option id="2" value="2">2</option>
            <option id="3" value="3">3</option>
            <option id="4" value="4">4</option>
        </select>
    </div>
    <div class="col-md-4 dropdown-container" id="building-container" style="display: none;">
        <label for="selectBuilding">Chosen Customer, Building Select</label>
        <select class="form-control pointer" name="tableBuildings" id="selectBuilding" style="font-size:100%">
            <option id="nothing" value="">---Select---</option>
            <option id="5" value="5" >5</option>
            <option id="6" value="6">6</option>
            <option id="7" value="7">7</option>
            <option id="8" value="8">8</option>
        </select>
    </div>
    <div class="col-md-4 dropdown-container" id="battery-container" style="display: none;">
        <label for="selectBattery">Chosen Building, Battery Select</label>
        <select class="form-control pointer" name="tableBatteries" id="selectBattery" style="font-size:100%">
            <option id="nothing" value="">---Select---</option>
            <option id="9" value="9" >9</option>
            <option id="10" value="10">10</option>
            <option id="11" value="11">11</option>
            <option id="12" value="12">12</option>
        </select>
    </div>
</div>

调整说明： #

• 给每个下拉菜单的容器添加了唯一id，方便JS控制显示/隐藏
• 给每个<select>设置唯一id，并修正<label>的for属性，保证关联正确
• 初始状态下，后两个容器通过style="display: none;"隐藏
• 修改了<select>的name属性，避免重复（可选，但更规范）

JavaScript实现逻辑 #

通过监听每个下拉菜单的change事件，判断选中项是否为有效选项（即value不为空），如果是则显示下一个下拉容器：

// 获取元素
const customerSelect = document.getElementById('selectCustomers');
const buildingContainer = document.getElementById('building-container');
const buildingSelect = document.getElementById('selectBuilding');
const batteryContainer = document.getElementById('battery-container');

// 监听客户下拉的选择事件
customerSelect.addEventListener('change', function() {
    // 选中项value不为空时，显示建筑下拉容器
    if (this.value !== '') {
        buildingContainer.style.display = 'block';
    } else {
        // 如果回到默认选项，隐藏后续所有下拉并重置状态
        buildingContainer.style.display = 'none';
        batteryContainer.style.display = 'none';
        buildingSelect.value = '';
    }
});

// 监听建筑下拉的选择事件
buildingSelect.addEventListener('change', function() {
    // 选中项value不为空时，显示电池下拉容器
    if (this.value !== '') {
        batteryContainer.style.display = 'block';
    } else {
        // 回到默认选项，隐藏电池下拉
        batteryContainer.style.display = 'none';
    }
});

逻辑说明： #

• 初始仅显示第一个下拉菜单
• 当客户下拉选中有效选项（非---Select---），显示建筑下拉
• 当建筑下拉选中有效选项，显示电池下拉
• 如果用户回到前一个下拉的默认选项，会自动隐藏后续所有下拉并重置选中状态，保证交互逻辑连贯

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