如何重置其余未选择的显示:无字段值

时间:2018-11-20 14:35:17

标签: javascript php jquery if-statement codeigniter-3

我使用了display:none,它将在从选择器中选择值后出现。当我取消选择时,它会很好地消失,但是值仍然存在。

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("displayingSecondAdultChild").style.display = "none";
			document.getElementById("displayingFirstAdultChild").style.display = "block";
		} else if (secondroom == nameSelect.value) {

			document.getElementById("displayingFirstAdultChild").style.display = "block";
			document.getElementById("displayingSecondAdultChild").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_first_child_age_second_room").style.display = "block";
			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";
		}
	}
}
<!DOCTYPE html>
<html>
   <head>
      <title>welcome</title>
   </head>
   <body>
      <!DOCTYPE html>
      <html lang="en">
         <head>
            <title>Bootstrap Example</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <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>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            <script src="<?php echo base_url(); ?>assets/js/addfields.js"></script>
         </head>
         <body>
            <div class="container">
               <h2>Modal Example</h2>
               <!-- Trigger the modal with a button -->
               <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
               <!-- Modal -->
               <div class="modal fade" id="myModal" role="dialog">
                  <div class="modal-dialog modal-lg">
                     <div class="modal-content">
                        <div class="modal-body">
                           <div class="container">
                              <div class="row">
                                 <div class="form-group">
                                    <div class="col-sm-2">
                                       <label><i class="fa fa-mail-forward" aria-hidden="true"></i> Select Rooms</label>
                                       <select id="thisidusedtodisplayrooms" 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-2">
                                          <h6>Options -</h6>
                                          <h6 class="#">Adults(12+)</h6>
                                          <select id="adult_first" name="adult_first" 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-2">
                                          <h6>1st Room</h6>
                                          <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-2">
                                             <h6>optional</h6>
                                             <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-2">
                                             <h6>optional</h6>
                                             <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-2">
                                          <h6>Options -</h6>
                                          <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-2">
                                          <h6>2nd Room</h6>
                                          <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-2">
                                             <h6>optional</h6>
                                             <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-2">
                                             <h6>optional</h6>
                                             <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>
                              <!-- this table will end here -->
                              <!--                                     first,second,third,column row also end here -->
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            </div>
            </div>
         </body>
      </html>

我曾经使用document.getElementById('div1')。innerHTML ='';和reset()方法但对我没有用。我只是想如果我取消选择字段并且它消失在内部值中也应该重置。请帮助 预先感谢

0 个答案:

没有答案