条件下拉菜单，在选择其他选项时重置

我正在创建一个基本的联系表单，其中包含下拉菜单并显示基于条件逻辑的其他下拉菜单。我正在使用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 的链接：https://jsfiddle.net/wcL72cr9/

谢谢

您可以根据

所选索引将其中一个选项设置为"选定"，同时使用$("#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();
  }
});

小提琴：https://jsfiddle.net/wcL72cr9/5/更新的示例

相关内容

最新更新

热门标签：