JS form - Dynamically populate dropdown list - multiple selections, form filling

Question

I am working on a form and I need the drop downs to populate based on the users previous selection. For example, if user selects a store type, that will gave date options, and depending on the store type and date selected, the next dropdown will show time options. I've gotten the first two steps working, but I am not sure how to do the time options.

You can see my code on my JS fiddle here: https://jsfiddle.net/katherinekonn/Lzuoy8r3/

 <form action="/CustomerService-FFEventBookAppointment">
        <fieldset>
            <div class="form-row required">
                <label for="fullname">
                    <span aria-required="true">Full Name</span>
                    <span class="required-indicator">*</span>
                </label>
                <input class="input-text email-input username required" id="fullname" type="text" name="fullname" value="" maxlength="500" autocomplete="off">
            </div>
            <div class="form-row">
                <label for="store">Preferred Store *</label>
                <div class="chzn-row valid">
                    <select id="store" name="store" onChange="changeDate(this.value);">
                        <option value=""></option>
                        <option value="MartinPlace">Martin Place</option>
                        <option value="ChatswoodChase">Chatswood Chase</option>
                        <option value="Emporium">Emporium</option>
                        <option value="Indooroopilly">Indooroopilly</option>
                        <option value="CollinsStreet">Collins Street</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <label for="date">Date *</label>
                <div class="chzn-row valid">
                    <select id="date" name="date"  onChange="changeYimr(this.value);">
                        <option value="" disabled selected>Select</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <label for="time">
                    Time *
                </label>
                <div class="chzn-row valid">
                    <select id="time" name="time">
                     <option value="" disabled selected>Select</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
               <button id="submit" class="submit-btn" type="submit" value="Book" name="book">Book</button>
            </div>
        </fieldset>
    </form>

var dateByStore = {
MartinPlace: ["Select", "Friday April 27", "Saturday April 28", "Sunday April 29", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13"],
  ChatswoodChase: ["Select", "Friday April 27", "Saturday Aprul 28", "Sunday April 29", "Wednesday May 2", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Wednesday May 9", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13", "Wednesday May 16"],
  Emporium: ["Select", "Friday April 27", "Saturday April 28", "Friday MAy 4", "Saturday May 5", "Friday May 11", "Saturday May 12"],
  Indooroopilly: ["Select", "Friday April 27", "Saturday Aprul 28", "Sunday April 29", "Wednesday May 2", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Wednesday May 9", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13", "Wednesday May 16"],
  CollinsStreet: ["Select", "Friday April 27", "Saturday April 28", "Thursday May 3", "Friday May 4", "Saturday May 5", "Thursday May 10", "Friday May 11", "Saturday May 12"]
}

   function changeDate(value) {
        if (value.length == 0) document.getElementById("date").innerHTML = "<option></option>";
        else {
            var dateOptions = "";
            for (dateId in dateByStore[value]) {
                dateOptions += "<option>" + dateByStore[value][dateId] + "</option>";
            }
            document.getElementById("date").innerHTML = dateOptions;
        }
    }

I'm thinking something along the lines of, if user has selected this store && this date, here are the time options dynamically populated in the dropdown. I just can't seem to figure out how to write out this next step in my code. Can anyone offer any help? I am a beginner at JS, any help is much appreciated. Thanks!

Answer 1

See below snippet. You have to use multidimensional associative array as per you requirement.I used dummy data for time. you can change with your data.

specify array like below way

var timeByDateStore = {
        "MartinPlace": {
            "Friday April 27": ["10am-11am", "1pm-2pm", "10am-11am", "1pm-2pm"],
            "Saturday April 28" : ["10am-11am", "1pm-2pm"],
            "Sunday April 29" : ["10am-11am", "1pm-2pm"],
            "Thursday May 3" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Sunday May 6" : ["10am-11am", "1pm-2pm"],
            "Thursday May 10" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"],
            "Sunday May 13": ["10am-11am", "1pm-2pm"]
        },
        "ChatswoodChase": {
            "Friday April 27" : ["10am-11am", "1pm-2pm"],
            "Saturday Aprul 28" : ["10am-11am", "1pm-2pm"],
            "Sunday April 29" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 2" : ["10am-11am", "1pm-2pm"],
            "Thursday May 3" : ["10am-11am", "1pm-2pm"],
            "Friday May 4" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Sunday May 6" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 9" : ["10am-11am", "1pm-2pm"],
            "Thursday May 10" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"],
            "Sunday May 13" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 16" : ["10am-11am", "1pm-2pm"]
        },
        "Emporium": {
            "Friday April 27" : ["10am-11am", "1pm-2pm"],
            "Saturday April 28" : ["10am-11am", "1pm-2pm"],
            "Friday MAy 4" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"]
        },
        "Indooroopilly": {
            "Friday April 27" : ["10am-11am", "1pm-2pm"],
            "Saturday Aprul 28" : ["10am-11am", "1pm-2pm"],
            "Sunday April 29" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 2" : ["10am-11am", "1pm-2pm"],
            "Thursday May 3" : ["10am-11am", "1pm-2pm"],
            "Friday May 4" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Sunday May 6" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 9" : ["10am-11am", "1pm-2pm"],
            "Thursday May 10" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"],
            "Sunday May 13" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 16" : ["10am-11am", "1pm-2pm"]
        },
        "CollinsStreet": {
            "Friday April 27" : ["10am-11am", "1pm-2pm"],
            "Saturday April 28" : ["10am-11am", "1pm-2pm"],
            "Thursday May 3" : ["10am-11am", "1pm-2pm"],
            "Friday May 4" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Thursday May 10" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"]
        }
    };

var dateByStore = {
MartinPlace: ["Select", "Friday April 27", "Saturday April 28", "Sunday April 29", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13"],
  ChatswoodChase: ["Select", "Friday April 27", "Saturday Aprul 28", "Sunday April 29", "Wednesday May 2", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Wednesday May 9", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13", "Wednesday May 16"],
  Emporium: ["Select", "Friday April 27", "Saturday April 28", "Friday MAy 4", "Saturday May 5", "Friday May 11", "Saturday May 12"],
  Indooroopilly: ["Select", "Friday April 27", "Saturday Aprul 28", "Sunday April 29", "Wednesday May 2", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Wednesday May 9", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13", "Wednesday May 16"],
  CollinsStreet: ["Select", "Friday April 27", "Saturday April 28", "Thursday May 3", "Friday May 4", "Saturday May 5", "Thursday May 10", "Friday May 11", "Saturday May 12"]
}

    var timeByDateStore = {
        "MartinPlace": {
            "Friday April 27": ["10am-11am", "1pm-2pm", "10am-11am", "1pm-2pm"],
            "Saturday April 28" : ["10am-11am", "1pm-2pm"],
            "Sunday April 29" : ["10am-11am", "1pm-2pm"],
            "Thursday May 3" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Sunday May 6" : ["10am-11am", "1pm-2pm"],
            "Thursday May 10" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"],
            "Sunday May 13": ["10am-11am", "1pm-2pm"]
        },
        "ChatswoodChase": {
            "Friday April 27" : ["10am-11am", "1pm-2pm"],
            "Saturday Aprul 28" : ["10am-11am", "1pm-2pm"],
            "Sunday April 29" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 2" : ["10am-11am", "1pm-2pm"],
            "Thursday May 3" : ["10am-11am", "1pm-2pm"],
            "Friday May 4" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Sunday May 6" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 9" : ["10am-11am", "1pm-2pm"],
            "Thursday May 10" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"],
            "Sunday May 13" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 16" : ["10am-11am", "1pm-2pm"]
        },
        "Emporium": {
            "Friday April 27" : ["10am-11am", "1pm-2pm"],
            "Saturday April 28" : ["10am-11am", "1pm-2pm"],
            "Friday MAy 4" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"]
        },
        "Indooroopilly": {
            "Friday April 27" : ["10am-11am", "1pm-2pm"],
            "Saturday Aprul 28" : ["10am-11am", "1pm-2pm"],
            "Sunday April 29" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 2" : ["10am-11am", "1pm-2pm"],
            "Thursday May 3" : ["10am-11am", "1pm-2pm"],
            "Friday May 4" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Sunday May 6" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 9" : ["10am-11am", "1pm-2pm"],
            "Thursday May 10" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"],
            "Sunday May 13" : ["10am-11am", "1pm-2pm"],
            "Wednesday May 16" : ["10am-11am", "1pm-2pm"]
        },
        "CollinsStreet": {
            "Friday April 27" : ["10am-11am", "1pm-2pm"],
            "Saturday April 28" : ["10am-11am", "1pm-2pm"],
            "Thursday May 3" : ["10am-11am", "1pm-2pm"],
            "Friday May 4" : ["10am-11am", "1pm-2pm"],
            "Saturday May 5" : ["10am-11am", "1pm-2pm"],
            "Thursday May 10" : ["10am-11am", "1pm-2pm"],
            "Friday May 11" : ["10am-11am", "1pm-2pm"],
            "Saturday May 12" : ["10am-11am", "1pm-2pm"]
        }
    };



   function changeDate(value) {
        if (value.length == 0) document.getElementById("date").innerHTML = "<option></option>";
        else {
            var dateOptions = "";
            for (dateId in dateByStore[value]) {
                dateOptions += "<option value='" + dateByStore[value][dateId]  + "'>" + dateByStore[value][dateId] + "</option>";
            }
            document.getElementById("date").innerHTML = dateOptions;
        }
    }

    $(document).ready(function(){
      $(document).on('change',"#date", function(){
            var date = $(this).val();
            if (date.length == 0) document.getElementById("time").innerHTML = "<option></option>";
            else {
                var store = $("#store option:selected").val();

                var timeOptions = "";
                for (timeId in timeByDateStore[store][date]) {
                    timeOptions += "<option value='" + timeByDateStore[store][date][timeId]  + "'>" + timeByDateStore[store][date][timeId] + "</option>";
                }
                document.getElementById("time").innerHTML = timeOptions;
            }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ffEvent">
    <div id="ffHeader">
        <div class="line"></div>
        <div class="line lineRight"></div>
        <p>Vip Access</p>
        <h1>Family &amp; Friends Event</h1>
    </div>
    <div id="ffLanding">
        <h2 class="section-header">Book an Appointment</h2>
        <form action="/CustomerService-FFEventBookAppointment">
            <fieldset>
                <div class="form-row required">
                    <label for="fullname">
                        <span aria-required="true">Full Name</span>
                        <span class="required-indicator">*</span>
                    </label>
                    <input class="input-text email-input username required" id="fullname" type="text" name="fullname" value="" maxlength="500" autocomplete="off">
                </div>
                <div class="form-row">
                    <label for="store">Preferred Store *</label>
                    <div class="chzn-row valid">
                        <select id="store" name="store" onChange="changeDate(this.value);">
                            <option value=""></option>
                            <option value="MartinPlace">Martin Place</option>
                            <option value="ChatswoodChase">Chatswood Chase</option>
                            <option value="Emporium">Emporium</option>
                            <option value="Indooroopilly">Indooroopilly</option>
                            <option value="CollinsStreet">Collins Street</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <label for="date">Date *</label>
                    <div class="chzn-row valid">
                        <select id="date" name="date">
                            <option value="" disabled selected>Select</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <label for="time">
                        Time *
                    </label>
                    <div class="chzn-row valid">
                        <select id="time" name="time">
                         <option value="" disabled selected>Select</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                   <button id="submit" class="submit-btn" type="submit" value="Book" name="book">Book</button>
                </div>
            </fieldset>
        </form>
    </div>
    <div id="ffThankyou">
    </div>

Answer 2

I will give just a general overview to do this instead of writing the code for you. This would help you implement it on your own.

In this case, you can manipulate the DOM to dynamically fill in the contents to the dropdown menu. Consider that the first dropdown is named "dropdown1" and second dropdown is named "dropdown2". You can add a changeEventListener to the second dropdown. This would allow you to execute a function whenever the second dropdown is changed. In this function, you check for the conditions and you change the innerHTML of the third dropdown box (timings in this case) accordingly.

Sample Code -

document.getElementById("dropdown2").onchange = function(){
 var dropdown1_value = document.getElementById("dropdown1").value;
 var dropdown2_value = document.getElementById("dropdown2").value;
 populateTimingDropdown(dropdown1_value, dropdown2_value);
};

var populateTimingDropdown(dropdown1_value, dropdown2_value){
  //getting reference to timing dropdown
  var timing_dropdown = document.getElementById("timing_dropdown");

  //empty the options first
  timing_dropdown.innerHTML = "";

  //checks for if conditions
  if(condition){

    //change innerHTML of timing dropdown accordingly.
    timing_dropdown.innerHTML += "<option value='value1'></option>";

 }

}