What can I do in JavaScript to make each drop down menu only appear after selecting the one before i-CodePudding

            <div >            
                <div >
                    <label for="selectCustomers">Customer Select</label>
                        <select  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 >
                    <label for="selectBuilding">Chosen Customer, Building Select</label>
                        <select  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 >
                    <label for="selectBattery">Chosen Building, Battery Select</label>
                        <select  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>

I want it to only show the first dropdown menu (selectCustomers) when you first load onto the page. After selecting an option other than id="nothing" it will show the next dropdown.

CodePudding user response：

You can add all your selects in array, and add change event listener for each to remove hide class from the next 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 >            
                <div >
                    <label for="selectCustomers">Customer Select</label>
                        <select  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 >
                    <label for="selectBuilding">Chosen Customer, Building Select</label>
                        <select  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 >
                    <label for="selectBattery">Chosen Building, Battery Select</label>
                        <select  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>