javascript - 如何重置其余未选择的显示：无字段值
问题描述
我使用了 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() 方法，但对我没有用。我只是想如果我取消选择字段并且它消失到内部值也应该重置。请帮助提前谢谢
解决方案
推荐阅读
- java - 模板方法模式问题
- django - AsyncWebsocketConsumer VS AsyncConsumer
- c# - 将项目添加到 SharePoint Online 列表 c#
- go - 如何跟踪执行流程（被调用的函数）
- apache - 本地主机错误代码：200 | 处理请求时出错（似乎与服务器的连接已丢失。）
- java - 无法在 Fragment Activity 上删除和创建数据
- sql - 从不同的数据库（源）更新表（目标）
- c++ - 组合框选择加载上一个选择
- list - 如何将我的数据保存在列表中，以便在 Flutter 应用程序的整个生命周期中使用？
- c# - 无法跟踪类型实体，因为主键属性“id”为空