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

Posted

技术标签:

【中文标题】JS 表单 - 动态填充下拉列表 - 多选，表单填充【英文标题】：JS form - Dynamically populate dropdown list - multiple selections, form filling 【发布时间】：2018-10-05 10:16:14 【问题描述】：

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

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

我在想一些事情，如果用户选择了这家商店 && 这个日期，这里是下拉列表中动态填充的时间选项。我似乎无法弄清楚如何在我的代码中写出下一步。任何人都可以提供任何帮助吗？我是 JS 的初学者，非常感谢任何帮助。谢谢！

【问题讨论】：

时间选项应该是什么？表示 12:00 AM 到 12:00 PM ??还是别的什么？并且这个时间选项存储在数据库或数组中的任何位置，就像您对日期选项一样，或者您想使用日期函数参考日期选项生成动态？ 时间选项将是例如上午 10 点至上午 11 点、下午 1 点至下午 2 点，但时间选项因商店类型和所选日期而异。时间选项将存储在数组中 你能展示一下这个数组吗？ 这是我的问题，我不知道该怎么做。但例如：如果用户选择 Emporium && April 27: "10am-11am", "12pm-1pm", "2pm-3pm" 你有这个时间选项与我要问的另外两个 dropdowm 相关 【参考方案1】：

参见下面的 sn-p。 您必须根据您的要求使用多维关联数组。我使用虚拟数据作为时间。您可以根据自己的数据进行更改。

像下面这样指定数组

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>

【讨论】：

非常感谢！我刚试过这个，它有效！而且我学到了一些新东西——我不知道多维关联数组。再次感谢您的时间和帮助！【参考方案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 表单 - 动态填充下拉列表 - 多选，表单填充的主要内容，如果未能解决你的问题，请参考以下文章

关于bootstrap 表单 带有多选下拉列表和kkpager翻页 的传值问题

重复网格中的用户输入以填充动态下拉列表

HTML笔记--- form表单；实现用户注册表单；下拉列表支持多选；file控件；readonly与disabled；maxlength

在一个 django 表单元素上覆盖数据验证

从下拉列表中填充 Bootstrap 表单

根据下拉选择创建动态下拉选项 - 卡住