我可以在 JavaScript 中做些什么来使每个下拉菜单仅在选择之前的下拉菜单后出现？

Question

 <div class="row"> <div class="col-md-4"> <label for="selectCustomers">Customer Select</label> <select class="form-control pointer" name="tableCustomers" id="tableCustomers" 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"> <label for="selectBuilding">Chosen Customer, Building Select</label> <select class="form-control pointer" name="tableCustomers" id="tableCustomers" 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"> <label for="selectBattery">Chosen Building, Battery Select</label> <select class="form-control pointer" name="tableCustomers" id="tableCustomers" 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>

我希望它仅在您首次加载到页面时显示第一个下拉菜单（selectCustomers）。 选择 id="nothing" 以外的选项后，它将显示下一个下拉菜单。

Answer 1

您可以在数组中添加所有选择，并为每个选择添加change事件侦听器，以从下一个 select 中删除hide select

 const firstSelect = document.getElementById('tableCustomers1'); const secondSelect = document.getElementById('tableCustomers2'); const thirdSelect = document.getElementById('tableCustomers3'); const selectArray = [firstSelect, secondSelect, thirdSelect] selectArray.forEach((select, i) => select.addEventListener('change', () => { const nextSelect = selectArray[i + 1] if (nextSelect) { nextSelect.closest('.hide').classList.remove('hide'); } }))

 .hide { display: none; }

 <div class="row"> <div class="col-md-4"> <label for="selectCustomers">Customer Select</label> <select class="form-control pointer" name="tableCustomers" id="tableCustomers1" 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 hide"> <label for="selectBuilding">Chosen Customer, Building Select</label> <select class="form-control pointer" name="tableCustomers" id="tableCustomers2" 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 hide"> <label for="selectBattery">Chosen Building, Battery Select</label> <select class="form-control pointer" name="tableCustomers" id="tableCustomers3" 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>