选择不同选项时重置的条件下拉菜单
Conditional dropdown menu that resets when a different choice is selected
我正在创建一个基本联系表单,其中包含下拉菜单并根据条件逻辑显示其他下拉菜单。我正在使用 JavaScript 来执行此操作。我对 JS 很陌生,所以这就是我想出的全部。它有效,但我的问题是,当您选择其中一个下拉选项时,新选项会保留在那里,即使您更改为其他选项也是如此。有没有办法让它在您每次从第一个下拉菜单中选择不同的选项时重置?
<body>
<h1>Price Quote</h1>
<h2>Request A Quote</h2>
<form id="price-quote">
<div class="form-group">
<label for="cleaning-service" class="control-label">Cleaning Service Requested</label>
<select class="form-control" onchange="serviceSelector(this);">
<option disabled selected value> -- select an option -- </option>
<option value="carpet-cleaning">Carpet Cleaning</option>
<option value="upholstery-cleaning">Upholstery Cleaning</option>
<option value="area-rug-cleaning">Area Rug Cleaning</option>
</select>
</div>
<!--carpet cleaning-->
<div id="carpet-services" style="display:none;">
<div class="form-group">
<!--how many bedrooms-->
<label class="control-label" for="carpet_cleaning">Bedrooms</label>
<select class="form-control" id="carpet_cleaning">
<option class="1-bedroom">1</option>
<option class="2-bedroom">2</option>
<option class="3-bedroom">3</option>
</select>
<!--how many dining rooms-->
<label class="control-label" for="carpet_cleaning">Dining Rooms</label>
<select class="form-control" id="carpet_cleaning">
<option>1</option>
<option>2</option>
</select>
<!--how many family rooms-->
<label class="control-label" for="carpet_cleaning">Family Rooms</label>
<select class="form-control" id="carpet_cleaning">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<!--upholstery cleaning-->
<div id="upholstery-services" style="display:none;">
<div class="form-group">
<!--how many dining room chairs-->
<label class="control-label" for="upholstery_cleaning">Dining Rooms Chairs (each)</label>
<select class="form-control" id="upholstery_cleaning">
<option class="1-dining-room-chair">1</option>
<option class="2-dining-room-chair">2</option>
</select>
<script>
function serviceSelector(that) {
if (that.value == "carpet-cleaning") {
document.getElementById("carpet-services").style.display = "block";
}
else if (that.value == "upholstery-cleaning") {
document.getElementById("upholstery-services").style.display = "block";
}
}
如果有更好的方法来做到这一点 - 可能有 - 我愿意改变它以使其更好地工作。如果这更容易的话,这里是 JSFiddle 的 link:https://jsfiddle.net/wcL72cr9/
谢谢
您可以将其中一个选项设置为 "selected",基于其选择的索引,同时使用 $("#carpet-services select,#upholstery-services select").prop('selectedIndex', 0);
我在你的主要 select
中添加了一个 id
而不是使用 onchange
事件,因为我在 Fiddle.
中遇到了一些问题
发件人:
<select class="form-control" onchange="serviceSelector(this);">
收件人:
<select class="form-control" id="cleaning">
并更新 jquery 如下:
$("#cleaning").change(function () {
$("#carpet-services,#upholstery-services").hide();
$("#carpet-services select,#upholstery-services select").prop('selectedIndex', 0);
if (this.value == "carpet-cleaning") {
$("#carpet-services").show();
}
else if (this.value == "upholstery-cleaning") {
$("#upholstery-services").show();
}
});
在 Fiddle 处更新了示例:https://jsfiddle.net/wcL72cr9/5/
我正在创建一个基本联系表单,其中包含下拉菜单并根据条件逻辑显示其他下拉菜单。我正在使用 JavaScript 来执行此操作。我对 JS 很陌生,所以这就是我想出的全部。它有效,但我的问题是,当您选择其中一个下拉选项时,新选项会保留在那里,即使您更改为其他选项也是如此。有没有办法让它在您每次从第一个下拉菜单中选择不同的选项时重置?
<body>
<h1>Price Quote</h1>
<h2>Request A Quote</h2>
<form id="price-quote">
<div class="form-group">
<label for="cleaning-service" class="control-label">Cleaning Service Requested</label>
<select class="form-control" onchange="serviceSelector(this);">
<option disabled selected value> -- select an option -- </option>
<option value="carpet-cleaning">Carpet Cleaning</option>
<option value="upholstery-cleaning">Upholstery Cleaning</option>
<option value="area-rug-cleaning">Area Rug Cleaning</option>
</select>
</div>
<!--carpet cleaning-->
<div id="carpet-services" style="display:none;">
<div class="form-group">
<!--how many bedrooms-->
<label class="control-label" for="carpet_cleaning">Bedrooms</label>
<select class="form-control" id="carpet_cleaning">
<option class="1-bedroom">1</option>
<option class="2-bedroom">2</option>
<option class="3-bedroom">3</option>
</select>
<!--how many dining rooms-->
<label class="control-label" for="carpet_cleaning">Dining Rooms</label>
<select class="form-control" id="carpet_cleaning">
<option>1</option>
<option>2</option>
</select>
<!--how many family rooms-->
<label class="control-label" for="carpet_cleaning">Family Rooms</label>
<select class="form-control" id="carpet_cleaning">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<!--upholstery cleaning-->
<div id="upholstery-services" style="display:none;">
<div class="form-group">
<!--how many dining room chairs-->
<label class="control-label" for="upholstery_cleaning">Dining Rooms Chairs (each)</label>
<select class="form-control" id="upholstery_cleaning">
<option class="1-dining-room-chair">1</option>
<option class="2-dining-room-chair">2</option>
</select>
<script>
function serviceSelector(that) {
if (that.value == "carpet-cleaning") {
document.getElementById("carpet-services").style.display = "block";
}
else if (that.value == "upholstery-cleaning") {
document.getElementById("upholstery-services").style.display = "block";
}
}
如果有更好的方法来做到这一点 - 可能有 - 我愿意改变它以使其更好地工作。如果这更容易的话,这里是 JSFiddle 的 link:https://jsfiddle.net/wcL72cr9/
谢谢
您可以将其中一个选项设置为 "selected",基于其选择的索引,同时使用 $("#carpet-services select,#upholstery-services select").prop('selectedIndex', 0);
我在你的主要 select
中添加了一个 id
而不是使用 onchange
事件,因为我在 Fiddle.
发件人:
<select class="form-control" onchange="serviceSelector(this);">
收件人:
<select class="form-control" id="cleaning">
并更新 jquery 如下:
$("#cleaning").change(function () {
$("#carpet-services,#upholstery-services").hide();
$("#carpet-services select,#upholstery-services select").prop('selectedIndex', 0);
if (this.value == "carpet-cleaning") {
$("#carpet-services").show();
}
else if (this.value == "upholstery-cleaning") {
$("#upholstery-services").show();
}
});
在 Fiddle 处更新了示例:https://jsfiddle.net/wcL72cr9/5/