当我们使用 JavaScript 隐藏/显示时清除下拉列表和/或文本框内容当它们被交替选择时
Posted
技术标签:
【中文标题】当我们使用 JavaScript 隐藏/显示时清除下拉列表和/或文本框内容当它们被交替选择时【英文标题】：Clear dropdown list and/or text box content when we hide/show using JavaScript When they are selected alternatively 【发布时间】：2017-01-18 06:29:28 【问题描述】：当我从选择框中选择选项时，我想显示下拉菜单或文本框。
我选择任一选项的下拉框：
<div class="form-group">
<label class="col-sm-4 control-label">Lessor Name</label>
<div class="col-sm-7">
<select onchange="showDiv(this)" class="form-control" id="lessor_name" name="lessor_name" required>
<option value=""> -- Select -- </option>
<option value="Company">Company</option>
<option value="Vendor">Vendor</option>
</select>
</div>
</div>
当我选择Company下面div会出现，
<div class="form-group" name="vehiclelist" id="vehiclelist" style="display:none;">
<label class="col-sm-4 control-label">Vehicle Number</label>
<div class="col-sm-7">
<select class="form-control" id="vehicle_list" name="vehicle_list" >
<option value=""> -- Select -- </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
当我选择Vendor时，div下面会出现
<div class="form-group" name="vendor_vehicle" id="vendor_vehicle" style="display:none;">
<label class="col-sm-4 control-label">Vendor Vehicle Num</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="vendor_vehicle_num" name="vendor_vehicle_num" >
</div>
</div>
下面是我的 javascript
function showDiv(select)
if(select.value=="Company")
document.getElementById('vehiclelist').style.display = "block";
else
document.getElementById('vehiclelist').style.display = "none";
document.getElementById('vehiclelist').value="";
if(select.value=="Vendor")
document.getElementById('vendor_vehicle').style.display = "block";
else
document.getElementById('vendor_vehicle').style.display = "none";
document.getElementById('vendor_vehicle').value="";
上面提到的代码对我来说非常有用。但问题是当我第一次选择Vendor 并在textbox 中输入任何文本时，如果我想在下拉列表中选择Company，插入的文本将在vendor 文本框中保持不变。
Vendor中的文本框和Company中选择的下拉框交替选中时如何通过JavaScript清除？
提前谢谢你
【问题讨论】：
只能选择一个--所以只能显示一个 嗨@Kirataka，如果有任何答案解决了您的问题，请单击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。 【参考方案1】：我认为您引用了错误的 ID。试试这个，让我知道它是否很好。
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<div class="form-group">
<label class="col-sm-4 control-label">Lessor Name</label>
<div class="col-sm-7">
<select onchange="showDiv(this)" class="form-control" id="lessor_name" name="lessor_name" required>
<option value=""> -- Select -- </option>
<option value="Company">Company</option>
<option value="Vendor">Vendor</option>
</select>
</div>
</div>
<div class="form-group" name="vehiclelist" id="vehiclelist" style="display:none;">
<label class="col-sm-4 control-label">Vehicle Number</label>
<div class="col-sm-7">
<select class="form-control" id="vehicle_list" name="vehicle_list" >
<option value=""> -- Select -- </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
<div class="form-group" name="vendor_vehicle" id="vendor_vehicle" style="display:none;">
<label class="col-sm-4 control-label">Vendor Vehicle Num</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="vendor_vehicle_num" name="vendor_vehicle_num" >
</div>
</div>
</body>
<script>
function showDiv(select)
if(select.value=="Company")
document.getElementById('vehiclelist').style.display = "block";
else
document.getElementById('vehiclelist').style.display = "none";
if(select.value=="Vendor")
document.getElementById('vendor_vehicle').style.display = "block";
document.getElementById('vendor_vehicle_num').value="";
else
document.getElementById('vendor_vehicle').style.display = "none";
document.getElementById('vendor_vehicle').value="";
</script>
</html>
【讨论】：
是的。你是对的兄弟。我在 JS 中传递了错误的 ID。谢谢。它现在可以工作了。以上是关于当我们使用 JavaScript 隐藏/显示时清除下拉列表和/或文本框内容当它们被交替选择时的主要内容，如果未能解决你的问题，请参考以下文章
引导表如何隐藏，当使用 javascript 切换可见时，它无法正确显示