Search code examples
javascripthtmldrop-down-menuconditional-statementscontact-form

Conditional dropdown menu that resets when a different choice is selected

I'm creating a basic contact form that has drop down menus and shows other drop down menus based on conditional logic. I'm using JavaScript to do this. I'm very new to JS, so this is all I've come up with. It works, but my issue is that when you choose one of the dropdown options, the new options stay there, even if you change to a different option. Is there a way to make it so that it resets each time you choose a different option from the first dropdown menu?

<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";
    }
}

If there's a better way to do this - and there probably is - I'm open to changing it to make it work better. Here's a link to a JSFiddle if that's easier: https://jsfiddle.net/wcL72cr9/

Thank you

Solution

  • You can set one of the options as "selected", based on it's selected index, at same time using $("#carpet-services select,#upholstery-services select").prop('selectedIndex', 0);

    I added an id to your main select instead of using onchange event cause I was facing some problems with Fiddle.

    From:

    <select class="form-control" onchange="serviceSelector(this);">

    To:

    <select class="form-control" id="cleaning">

    And updated the jquery as following:

    $("#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();
  }
});

    Updated example at Fiddle: https://jsfiddle.net/wcL72cr9/5/