选择不同选项时重置的条件下拉菜单答案

【问题标题】：Conditional dropdown menu that resets when a different choice is selected选择不同选项时重置的条件下拉菜单
【发布时间】：2017-04-05 06:00:39
【问题描述】：

我正在创建一个基本的联系表单，该表单具有下拉菜单并根据条件逻辑显示其他下拉菜单。我正在使用 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/

谢谢

【问题讨论】：

标签： javascript html drop-down-menu conditional contact-form

【解决方案1】：

您可以将其中一个选项设置为“已选择”，基于它的选定索引，同时使用$("#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/

【讨论】：