当我从选择框中选择选项时，我想显示下拉列表或文本框。
下拉框，我可以在其中选择一个选项:
<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清除它们？
提前谢谢
最佳答案
我认为您引用了错误的 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>
关于javascript - 当我们使用 JavaScript 隐藏/显示时清除下拉列表和/或文本框内容 当它们被交替选择时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39422855/