从另一个下拉值引用的下拉值

Question

我正在制作电影院的预订页面。我希望用户能够选择放映电影的日期，然后根据日期选择可用的会话。

例如，第一个下拉菜单显示当前正在播放的电影。如果有人想查看 Pixels，则第二个下拉菜单会显示 Pixels 显示的日期。用户选择一天后，第三个下拉菜单将提供 Pixels 在该特定日期显示的时间。

    <label>Movie Name:
                                <select id="movie" name="movie">
                                    <option selected="selected" value="">Please select a movie</option>
                                    <option value="Pixels">Pixels</option>
                                    <option value="Straight_Outta_Compton">Straight Outta Compton</option>
                                    <option value="Last_Cab_To_Darwin">Last Cab To Darwin</option>
                                    <option value="Nicki_and_The_Flash">Nicki and The Flash</option>
                                    </option>
                                </select>
                            </label>

                            </br>

                            <label>Session Day:
                                <select id="day" name="day">
                                        <option selected="selected" value="">Please select...</option>
                                        <option value="Monday">Monday</option>
                                        <option value="Tuesday">Tuesday</option>
                                        <option value="Wednesday">Wednesday</option>
                                        <option value="Thursday">Thursday</option>
                                        <option value="Friday">Friday</option>
                                        <option value="Saturday">Saturday</option>
                                        <option value="Sunday">Sunday</option>
                                </select>
                            </label>

                            </br>

                            <label>Session Time:
                                <select id="time" name="time">
                                        <option selected="selected" value="">Please select...</option>
                                        <option value="1200">12:00</option>
                                        <option value="1300">13:00</option>
                                        <option value="1500">15:00</option>
                                        <option value="1800">18:00</option>
                                        <option value="2100">21:00</option>
                                </select>
                            </label>

假设 Pixels 在星期一和星期二显示，它显示的唯一时间是 13:00 和 18:00。我将如何编写 jQuery 来提供这种功能？

Answer 1

有关如何处理此问题的快速示例：

JS

$("#movie").on("change", function(){
    $("#day option, #time option").hide();
    var days = $("option:selected", this).attr("data-days").split(",");
    var times = $("option:selected", this).attr("data-times").split(",");
    for(i=0; i<days.length; i++){
        $("#day option[value="+days[i]+"]").show();
    }
    for(i=0; i<times.length; i++){
        $("#time option[value="+times[i]+"]").show();
    }
});

CSS

#day option, #time option{
    display:none;
}

您必须在 data-days 和 data-times 属性中存储每部电影的所有信息。

这样，一旦select编辑，你就可以检索所有这些信息，拆分它们，并显示相应的<option>

小心，你的“#movie”末尾有一个没用的 </option> 标签 <select></select>

Live Demo

编辑 1：根据您的评论，我可以提供的解决方案可能类似于 this exemple

首先，将所有信息存储在 data- 属性中，例如 day1[time1,time2];day2[time1,time2] 等等。

在 #movie .change() 事件上的一些 split() & substring() 之后，您可以为 #day select 标签动态添加特定选项（现在看起来像 <option value="Monday" data-times="13:00,18:00">Monday</option>）。

和以前一样，只需创建一个函数来处理 #day .change() 事件上的 data-times 以动态创建所需的 #time 选项

从另一个下拉值引用的下拉值

drop-down values referenced from another drop-down value

javascript

jquery

html

drop-down-menu

html-select