为什么jQuery无法按要求工作

Question

function displayingListAdultChild(nameSelect){
      if(nameSelect){
           firstroom 			= document.getElementById("firstroom").value;
           secondroom 			= document.getElementById("secondroom").value;
           thirdroom 			= document.getElementById("thirdroom").value;
           fourthroom 			= document.getElementById("fourthroom").value;
          if(firstroom == nameSelect.value){
          	  document.getElementById("displayingFourthAdultChild").style.display = "none";
          	  document.getElementById("displayingThirdAdultChild").style.display = "none";
          	  document.getElementById("displayingSecondAdultChild").style.display = "none";
              document.getElementById("displayingFirstAdultChild").style.display = "block";
          }
          else if(secondroom == nameSelect.value){
          	  document.getElementById("displayingFourthAdultChild").style.display = "none";
          	  document.getElementById("displayingThirdAdultChild").style.display = "none";
              document.getElementById("displayingSecondAdultChild").style.display = "block";

          }else if(thirdroom == nameSelect.value){
          	  document.getElementById("displayingFourthAdultChild").style.display = "none";
          	  document.getElementById("displayingSecondAdultChild").style.display = "block";
              document.getElementById("displayingThirdAdultChild").style.display = "block";
          }else if(fourthroom == nameSelect.value){
          	  document.getElementById("displayingSecondAdultChild").style.display = "block";
              document.getElementById("displayingThirdAdultChild").style.display = "block";
          	  document.getElementById("displayingFourthAdultChild").style.display = "block";
          }
      }
   }

   /*here selecting child field*/
   function displayingNumberOfChildAge(nameSelect){
   	// body... 
   	if(nameSelect){
   	         first_child_col 			= document.getElementById("first_child_col").value;
             second_child_col 			= document.getElementById("second_child_col").value;
             second_child_col 			= document.getElementById("second_child_col").value;
            if(first_child_col == nameSelect.value){
            	document.getElementById("displaying_second_child_age").style.display = "none";
                document.getElementById("displaying_first_child_age").style.display = "block";
            }
            else if(second_child_col == nameSelect.value){
                document.getElementById("displaying_first_child_age").style.display = "block";
                document.getElementById("displaying_second_child_age").style.display = "block";
            }else {
            	document.getElementById("displaying_first_child_age").style.display = "none";
            	document.getElementById("displaying_second_child_age").style.display = "none";
            }
        }
     }
     function displayingNumberOfChildAgeSecondRoom(nameSelect){
   	// body... 
   	if(nameSelect){
   	      sec_room_first_child_col 		= document.getElementById("sec_room_first_child_col").value;
          sec_room_second_child_col 	= document.getElementById("sec_room_second_child_col").value;
            if(first_child_col == nameSelect.value){
            	document.getElementById("displaying_second_child_age_second_room").style.display = "none";
                document.getElementById("displaying_first_child_age_second_room").style.display = "block";
            }
            else if(second_child_col == nameSelect.value){
     
                document.getElementById("displaying_second_child_age_second_room").style.display = "block";
            }else {
            	document.getElementById("displaying_first_child_age_second_room").style.display = "none";
            	document.getElementById("displaying_second_child_age_second_room").style.display = "none";
            }
        }
     }
     function displayingNumberOfChildAgeThirdRoom(nameSelect){
   	// body... 
   	if(nameSelect){
   	      third_room_first_child_col 	= document.getElementById("third_room_first_child_col").value;
          third_room_second_child_col 	= document.getElementById("third_room_second_child_col").value;
            if(first_child_col == nameSelect.value){
            	document.getElementById("displaying_second_child_age_third_room").style.display = "none";
                document.getElementById("displaying_first_child_age_third_room").style.display = "block";
            }
            else if(second_child_col == nameSelect.value){
     
                document.getElementById("displaying_second_child_age_third_room").style.display = "block";
            }else {
            	document.getElementById("displaying_first_child_age_third_room").style.display = "none";
            	document.getElementById("displaying_second_child_age_third_room").style.display = "none";
            }
        }
     }
     function displayingNumberOfChildAgeFourthRoom(nameSelect){
   	// body... 
   	if(nameSelect){
   	      fourth_room_first_child_col 	= document.getElementById("fourth_room_first_child_col").value;
          fourth_room_second_child_col 	= document.getElementById("fourth_room_second_child_col").value;
            if(fourth_room_first_child_col == nameSelect.value){
            	document.getElementById("displaying_second_child_age_fourth_room").style.display = "none";
                document.getElementById("displaying_first_child_age_fourth_room").style.display = "block";
            }
            else if(fourth_room_second_child_col == nameSelect.value){
     
                document.getElementById("displaying_second_child_age_fourth_room").style.display = "block";
            }else {
            	document.getElementById("displaying_first_child_age_fourth_room").style.display = "none";
            	document.getElementById("displaying_second_child_age_fourth_room").style.display = "none";
            }
        }
     }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
   <div class="form-group">
      
      
      <div class="col-sm-1">
         <label>Rooms</label>
         <select id="rooms" onchange="displayingListAdultChild(this);" class="form-control">
            <option id="empty">Select</option>
            <option id="firstroom" 	value="1">1</option>
            <option id="secondroom" 	value="2">2</option>
            <option id="thirdroom" 	value="3">3</option>
            <option id="fourthroom" 	value="4">4</option>
            <option id="fifthroom" 	value="5">5</option>
            <option id="sixthroom" 	value="6">6</option>
         </select>
      </div>
      
   </div>
</div>
<div class="row">
   <div id="displayingFirstAdultChild" style="display:none;">
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="#">Adults(12+)</h6>
            <select id="adult_first" name="Room0_Adult" class="form-control">
               <option   value='1'>1</option>
               <option selected='selected' value='2'>2</option>
               <option value='3'>3</option>
               <option value='4'>4</option>
               <option value='5'>5</option>
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="m_label">Child(0-12)</h6>
            <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
               <option>select</option>
               <option id="first_child_col"  value='1'>1</option>
               <option id="second_child_col"  value='2'>2</option>
            </select>
         </div>
      </div>
      <div class="#" id="displaying_first_child_age" style="display: none;">
         <div class="form-group">
            <div class="col-xs-1">
               <h6 class="m_label">Child(1)Age</h6>
               <select  class="form-control" id="first_child_age" name="first_child_age">
                  <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>
               </select>
            </div>
         </div>
         <div class="#" id="displaying_second_child_age" style="display: none;">
            <div class="form-group col-xs-1">
               <h6 class="m_label">Child(2)Age</h6>
               <select class="form-control" id="second_child_age" name="second_child_age">
                  <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>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div id="displayingSecondAdultChild" style="display:none;">
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="#">Adults(12+)</h6>
            <select id="adult_first" name="Room0_Adult" class="form-control">
               <option   value='1'>1</option>
               <option selected='selected' value='2'>2</option>
               <option value='3'>3</option>
               <option value='4'>4</option>
               <option value='5'>5</option>
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="m_label">Child(0-12)</h6>
            <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAgeSecondRoom(this);" class="form-control">
               <option>select</option>
               <option id="sec_room_first_child_col"  value='1'>1</option>
               <option id="sec_room_second_child_col"  value='2'>2</option>
            </select>
         </div>
      </div>
      <div class="#" id="displaying_first_child_age_second_room" style="display: none;">
         <div class="form-group">
            <div class="col-xs-1">
               <h6 class="m_label">Child(1)Age</h6>
               <select  class="form-control" id="first_child_age" name="first_child_age">
                  <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>
               </select>
            </div>
         </div>
         <div class="#" id="displaying_second_child_age_second_room" style="display: none;">
            <div class="form-group col-xs-1">
               <h6 class="m_label">Child(2)Age</h6>
               <select class="form-control" id="second_child_age" name="second_child_age">
                  <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>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div id="displayingThirdAdultChild" style="display:none;">
      <label>Third Room</label>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="#">Adults(12+)</h6>
            <select id="adult_first" name="Room0_Adult" class="form-control">
               <option   value='1'>1</option>
               <option selected='selected' value='2'>2</option>
               <option value='3'>3</option>
               <option value='4'>4</option>
               <option value='5'>5</option>
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="m_label">Child(0-12)</h6>
            <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAgeThirdRoom(this);" class="form-control">
               <option>select</option>
               <option id="third_room_first_child_col"  value='1'>1</option>
               <option id="third_room_second_child_col"  value='2'>2</option>
            </select>
         </div>
      </div>
      <div class="#" id="displaying_first_child_age_third_room" style="display: none;">
         <div class="form-group">
            <div class="col-xs-1">
               <h6 class="m_label">Child(1)Age</h6>
               <select  class="form-control" id="first_child_age" name="first_child_age">
                  <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>
               </select>
            </div>
         </div>
         <div class="#" id="displaying_second_child_age_third_room" style="display: none;">
            <div class="form-group col-xs-1">
               <h6 class="m_label">Child(2)Age</h6>
               <select class="form-control" id="second_child_age" name="second_child_age">
                  <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>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div id="displayingFourthAdultChild" style="display:none;">
      <label>Fourth Room</label>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="#">Adults(12+)</h6>
            <select id="adult_first" name="Room0_Adult" class="form-control">
               <option   value='1'>1</option>
               <option selected='selected' value='2'>2</option>
               <option value='3'>3</option>
               <option value='4'>4</option>
               <option value='5'>5</option>
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="col-xs-1">
            <h6 class="m_label">Child(0-12)</h6>
            <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAgeFourthRoom(this);" class="form-control">
               <option>select</option>
               <option id="fourth_room_first_child_col"  value='1'>1</option>
               <option id="fourth_room_second_child_col"  value='2'>2</option>
            </select>
         </div>
      </div>
      <div class="#" id="displaying_first_child_age_fourth_room" style="display: none;">
         <div class="form-group">
            <div class="col-xs-1">
               <h6 class="m_label">Child(1)Age</h6>
               <select  class="form-control" id="first_child_age" name="first_child_age">
                  <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>
               </select>
            </div>
         </div>
         <div class="#" id="displaying_second_child_age_fourth_room" style="display: none;">
            <div class="form-group col-xs-1">
               <h6 class="m_label">Child(2)Age</h6>
               <select class="form-control" id="second_child_age" name="second_child_age">
                  <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>
               </select>
            </div>
         </div>
      </div>
   </div>
</div>

其客房服务选项。 根据要求，房间将可见。 当我点击第一个房间，所以成功接收结果。 但是当试图通过选择选择器字段来获得所有空间时，它无法正常工作。 选项内还有子选项，也可以选择子选项。尝试立即单击第二个子框时，它也没有第一次出现

Answer 1

您提到您是从其他人那里采用此代码的。如果要将其更新为jQuery，将进行很多更改。如果您不想，则不必。

功能背后的想法是做一些经常重复的事情。因此，最好编写一个可以处理4个部分的函数，而不是为每个部分编写一个唯一的函数。除非每个功能都做不同的事情。

通过对HTML进行一些细微的更改，您可以更好地利用class属性，并使很多代码更小且更易于使用。

这里是一个例子。

function displayingListAdultChild(nameSelect) {
  if (nameSelect) {
    $(".display-selection").hide();
    for (var i = 0; i < nameSelect.value; i++) {
      $(".display-selection").eq(i).show();
    }
  }
}

function displayingNumberOfChildAge(nameSelect) {
  if (nameSelect) {
    if (nameSelect.value == 1) {
      $(nameSelect).closest(".display-selection").find(".child-1").show();
      $(nameSelect).closest(".display-selection").find(".child-2").hide();
    } else if (nameSelect.value == 2) {
      $(nameSelect).closest(".display-selection").find(".child-1").show();
      $(nameSelect).closest(".display-selection").find(".child-2").show();
    } else {
      $(nameSelect).closest(".display-selection").find(".child-1").hide();
      $(nameSelect).closest(".display-selection").find(".child-2").hide();
    }
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
  <div class="form-group">
    <div class="col-sm-1">
      <label>Rooms</label>
      <select id="rooms" onchange="displayingListAdultChild(this);" class="form-control">
        <option id="empty">Select</option>
        <option id="firstroom" value="1">1</option>
        <option id="secondroom" value="2">2</option>
        <option id="thirdroom" value="3">3</option>
        <option id="fourthroom" value="4">4</option>
        <option id="fifthroom" value="5">5</option>
        <option id="sixthroom" value="6">6</option>
      </select>
    </div>
  </div>
</div>
<div class="row">
  <div id="displayingFirstAdultChild" style="display:none;" class="display-selection">
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="#">Adults(12+)</h6>
        <select id="adult_first" name="Room0_Adult" class="form-control">
          <option value='1'>1</option>
          <option selected='selected' value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="m_label">Child(0-12)</h6>
        <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
          <option>select</option>
          <option id="first_child_col" value='1'>1</option>
          <option id="second_child_col" value='2'>2</option>
        </select>
      </div>
    </div>
    <div class="# child-1" id="displaying_first_child_age" style="display: none;">
      <div class="form-group">
        <div class="col-xs-1">
          <h6 class="m_label">Child(1)Age</h6>
          <select class="form-control" id="first_child_age" name="first_child_age">
            <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>
          </select>
        </div>
      </div>
    </div>
    <div class="# child-2" id="displaying_second_child_age" style="display: none;">
      <div class="form-group col-xs-1">
        <h6 class="m_label">Child(2)Age</h6>
        <select class="form-control" id="second_child_age" name="second_child_age">
          <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>
        </select>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div id="displayingSecondAdultChild" style="display:none;" class="display-selection">
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="#">Adults(12+)</h6>
        <select id="adult_first" name="Room0_Adult" class="form-control">
          <option value='1'>1</option>
          <option selected='selected' value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="m_label">Child(0-12)</h6>
        <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
          <option>select</option>
          <option id="sec_room_first_child_col" value='1'>1</option>
          <option id="sec_room_second_child_col" value='2'>2</option>
        </select>
      </div>
    </div>
    <div class="# child-1" id="displaying_first_child_age_second_room" style="display: none;">
      <div class="form-group">
        <div class="col-xs-1">
          <h6 class="m_label">Child(1)Age</h6>
          <select class="form-control" id="first_child_age" name="first_child_age">
            <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>
          </select>
        </div>
      </div>
      <div class="# child-2" id="displaying_second_child_age_second_room" style="display: none;">
        <div class="form-group col-xs-1">
          <h6 class="m_label">Child(2)Age</h6>
          <select class="form-control" id="second_child_age" name="second_child_age">
            <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>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div id="displayingThirdAdultChild" style="display:none;" class="display-selection">
    <label>Third Room</label>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="#">Adults(12+)</h6>
        <select id="adult_first" name="Room0_Adult" class="form-control">
          <option value='1'>1</option>
          <option selected='selected' value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="m_label">Child(0-12)</h6>
        <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
          <option>select</option>
          <option id="third_room_first_child_col" value='1'>1</option>
          <option id="third_room_second_child_col" value='2'>2</option>
        </select>
      </div>
    </div>
    <div class="# child-1" id="displaying_first_child_age_third_room" style="display: none;">
      <div class="form-group">
        <div class="col-xs-1">
          <h6 class="m_label">Child(1)Age</h6>
          <select class="form-control" id="first_child_age" name="first_child_age">
            <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>
          </select>
        </div>
      </div>
      <div class="# child-2" id="displaying_second_child_age_third_room" style="display: none;">
        <div class="form-group col-xs-1">
          <h6 class="m_label">Child(2)Age</h6>
          <select class="form-control" id="second_child_age" name="second_child_age">
            <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>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div id="displayingFourthAdultChild" style="display:none;" class="display-selection">
    <label>Fourth Room</label>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="#">Adults(12+)</h6>
        <select id="adult_first" name="Room0_Adult" class="form-control">
          <option value='1'>1</option>
          <option selected='selected' value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-1">
        <h6 class="m_label">Child(0-12)</h6>
        <select id="selected_child" name="selected_child" onchange="displayingNumberOfChildAge(this);" class="form-control">
          <option>select</option>
          <option id="fourth_room_first_child_col" value='1'>1</option>
          <option id="fourth_room_second_child_col" value='2'>2</option>
        </select>
      </div>
    </div>
    <div class="# child-1" id="displaying_first_child_age_fourth_room" style="display: none;">
      <div class="form-group">
        <div class="col-xs-1">
          <h6 class="m_label">Child(1)Age</h6>
          <select class="form-control" id="first_child_age" name="first_child_age">
            <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>
          </select>
        </div>
      </div>
      <div class="# child-2" id="displaying_second_child_age_fourth_room" style="display: none;">
        <div class="form-group col-xs-1">
          <h6 class="m_label">Child(2)Age</h6>
          <select class="form-control" id="second_child_age" name="second_child_age">
            <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>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

与其使用ID来调用每个项目，还可以利用类选择，从而成组或更广泛地调用事物。这样一来，许多地方（或房间）都可以使用一种功能。

如果这根本没有意义，我会回头阅读或阅读一些基本的jQuery教程。利用jQuery框架可以为您带来很多帮助。