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属性中存储有关每部电影的所有信息。

这样，一旦选中，您可以检索所有这些信息，拆分它们，并显示相应的<option>

要好心，你的＃34;＃movie＆＃34;结尾处有一个无用的</option>标签。 <select></select>

Live Demo

编辑1：根据您的评论，我可以提供的解决方案看起来像this exemple

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

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

与之前相同，只需创建一个处理data-times #day事件.change()的函数，以动态创建所需的#time选项

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

1 个答案: