Javascript：创建隐藏输入表单的替代或不太复杂的代码

我请求您帮助改进我创建的表单，请记住我不是javascript编程方面的专家

我需要创建一个酒店搜索引擎，可以选择房间总数。根据所选房间的数量，将显示尽可能多的隐藏表单字段，其中包含其他选择字段

构思​​我创造了更好的东西，我附加了一个屏幕

为了查看与所选房间数量相关的隐藏字段，我使用了javascript代码，重复了5次（最大房间数量）

为了实现选择每个房间的选项，我使用了与房间号成比例的javascript代码重复。即：1房间->录入代码1一次；2个房间->输入代码2次；等等

function childSelect(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
    admOptionValue = document.getElementById("child1").value;
    if(admOptionValue == nameSelect.value){
        document.getElementById("agechild1").style.display = "block";
    }
    else{
        document.getElementById("agechild1").style.display = "none";
    }
 }
 else{
    document.getElementById("agechild1").style.display = "none";
 }

 if(nameSelect){
    admOptionValue = document.getElementById("child2").value;
    if(admOptionValue == nameSelect.value){
        document.getElementById("agechild2").style.display = "block";
    }
    else{
        document.getElementById("agechild2").style.display = "none";
    }
}
else{
    document.getElementById("agechild2").style.display = "none";
}

if(nameSelect){
    admOptionValue = document.getElementById("child3").value;
    if(admOptionValue == nameSelect.value){
        document.getElementById("agechild3").style.display = "block";
    }
    else{
        document.getElementById("agechild3").style.display = "none";
    }
}
else{
    document.getElementById("agechild3").style.display = "none";
}
}

$(function(){
     $(':submit').click(function(){
          $('select').each(function(){
              if ( $(this).val() == '' )
              {
                  $(this).remove(); // or 
$(this).attr('disabled','disabled');
              }
          });
     });
});

同时，我以同样的方式重复使用了这个html代码

<div class="container_hidden">


    <div id="pax_room_1" style="display:none;" class="row_hidden">

        <div class="nrRoom" style="width: 100px;background: #f5a445;font-size: 15px;text-align: center;height: 30px; padding-top: 5px; border-radius: 10px 10px 0px 0px;"><font color="#000"><img src="images/family-room.png" alt="Icon Family Room" style="width: 19px;" /> Room 1</font></div>

            <div class="column"><font color="#000">Adult (18+)</font>
                <select id="adulti" name="nrAdult">
                    <option value="">-</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>        
                </select>
            </div>          
            <div class="column"><font color="#000">Children (0-17)</font>
                <select id="nrchild" name="nrChild" onchange="childSelect(this);">
                    <option value="">-</option>
                    <option id="child1" value="1">1</option>
                    <option id="child2" value="2">2</option>
                    <option id="child3" value="3">3</option>
                </select>
            </div>

                        <!-- Select Bambino 1 -->
                        <div id="agechild1" style="display:none;" class="row_hidden">
                        <div class="column"><font color="#000"> Child Age 1 </font>
                        <select id="child1" name="ageChild1">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        </div>

                        <!-- Select Bambino 1-2 -->
                        <div id="agechild2" style="display:none;" class="row_hidden">
                        <div class="column"><font color="#000"> Child Age 1 </font>
                        <select id="child1" name="ageChild1">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        <div class="column"><font color="#000"> Child Age 2 </font>
                        <select id="child2" name="ageChild2">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        </div>

                        <!-- Select Bambino 1-2-3 -->
                        <div id="agechild3" style="display:none;" class="row_hidden">
                        <div class="column"><font color="#000"> Child Age 1 </font>
                        <select id="child1" name="ageChild1">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        <div class="column"><font color="#000"> Child Age 2 </font>
                        <select id="child2" name="ageChild2">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        <div class="column"><font color="#000"> Child Age 3 </font>
                        <select id="child3" name="ageChild3">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        </div>
    </div>

1号房间
成人（18岁以上）
-
1.
2.
3.
4.
5.
6.
儿童（0-17岁）
-
1.
2.
3.
1岁儿童
-
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
1岁儿童
-
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
2岁儿童
-
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
1岁儿童
-
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
2岁儿童
-
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
3岁儿童
-
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17

---

我意识到这太费力了，即使它有效。这就是为什么我问您是否有办法减轻代码。

您可以使用

data-*

属性动态选择html中的关系

e、 g

（函数（）{
const hiders=document.getElementsByClassName（'hider'）；
//const是ES6语法，您可以使用var，尽管您可能想了解一下
for（设i=0；i<div class="container_hidden">


    <div id="pax_room_1" style="display:none;" class="row_hidden">

        <div class="nrRoom" style="width: 100px;background: #f5a445;font-size: 15px;text-align: center;height: 30px; padding-top: 5px; border-radius: 10px 10px 0px 0px;"><font color="#000"><img src="images/family-room.png" alt="Icon Family Room" style="width: 19px;" /> Room 1</font></div>

            <div class="column"><font color="#000">Adult (18+)</font>
                <select id="adulti" name="nrAdult">
                    <option value="">-</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>        
                </select>
            </div>          
            <div class="column"><font color="#000">Children (0-17)</font>
                <select id="nrchild" name="nrChild" onchange="childSelect(this);">
                    <option value="">-</option>
                    <option id="child1" value="1">1</option>
                    <option id="child2" value="2">2</option>
                    <option id="child3" value="3">3</option>
                </select>
            </div>

                        <!-- Select Bambino 1 -->
                        <div id="agechild1" style="display:none;" class="row_hidden">
                        <div class="column"><font color="#000"> Child Age 1 </font>
                        <select id="child1" name="ageChild1">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        </div>

                        <!-- Select Bambino 1-2 -->
                        <div id="agechild2" style="display:none;" class="row_hidden">
                        <div class="column"><font color="#000"> Child Age 1 </font>
                        <select id="child1" name="ageChild1">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        <div class="column"><font color="#000"> Child Age 2 </font>
                        <select id="child2" name="ageChild2">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        </div>

                        <!-- Select Bambino 1-2-3 -->
                        <div id="agechild3" style="display:none;" class="row_hidden">
                        <div class="column"><font color="#000"> Child Age 1 </font>
                        <select id="child1" name="ageChild1">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        <div class="column"><font color="#000"> Child Age 2 </font>
                        <select id="child2" name="ageChild2">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        <div class="column"><font color="#000"> Child Age 3 </font>
                        <select id="child3" name="ageChild3">
                        <option value="">-</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        </select>
                        </div>
                        </div>
    </div>