Question

我正在处理表单，我需要根据用户之前的选择填充下拉列表。例如，如果用户选择商店类型，则会提供日期选项，并且根据所选的商店类型和日期，下一个下拉列表将显示时间选项。我已经完成了前两个步骤，但我不确定如何做时间选项。

你可以在我的JS小提琴上看到我的代码：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;
        }
    }

如果用户选择了此商店＆amp;＆amp;和我正在考虑的话。此日期，以下是下拉列表中动态填充的时间选项。我似乎无法弄清楚如何在我的代码中写出下一步。有人可以提供任何帮助吗？我是JS的初学者，非常感谢任何帮助。谢谢！

Answer 1

见下面的代码段。您必须根据您的要求使用多维关联数组。我使用虚拟数据时间。你可以改变你的数据。

像下面那样指定数组

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

我将仅提供一般概述，而不是为您编写代码。这可以帮助您自己实现它。

在这种情况下，您可以操纵DOM以动态填充下拉菜单中的内容。考虑第一个下拉列表名为“dropdown1”，第二个下拉列表名为“dropdown2”。您可以将changeEventListener添加到第二个下拉列表中。这将允许您在第二个下拉列表更改时执行函数。在此函数中，您检查条件并相应地更改第三个下拉框的innerHTML（在本例中为时间）。

示例代码 -

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

 }

}

JS表单 - 动态填充下拉列表 - 多个选择，表单填写

2 个答案: