按日期分组筛选多维数组：实现电影排期日历页面展示

我有一个存储电影信息的多维数组，想要基于它实现电影排期日历页面。数组结构如下：

$movies = [
    'MOVIE TITLE #1' => [
        'id' => 11990,
        'times' => [
            '2023-06-03' => [
                '11:00am',
                '2:30pm',
                '6:00pm',
                '9:30pm',
            ],
            '2023-06-04' => [
                '12:30pm',
                '4:00pm',
                '7:30pm',
            ],
            '2023-06-06' => [
                '12:30pm',
                '4:00pm',
                '7:30pm',
            ],
        ],
    ],
    'MOVIE TITLE #2' => [
        'id' => 11892,
        'times' => [
            '2023-06-03' => [
                '12:00pm',
                '3:30pm',
                '7:00pm',
            ],
        ],
    ],
];

另外还有一个存储放映日期的数组，用来填充表单下拉框，通过选择日期来显示/隐藏对应日期的排期DIV。需要根据这个日期数组，从电影数组中筛选出对应日期放映的电影，生成以日期为容器（DIV）的展示结构。

1. 数据预处理（PHP） #

先把原电影数组转换为以日期为键的结构，方便后续按日期筛选：

// 示例日期数组，可替换为实际业务中的日期集合
$showDates = ['2023-06-03', '2023-06-04', '2023-06-06'];

// 转换为【日期 => 对应电影列表】的结构
$dateMovies = [];
foreach ($movies as $title => $movie) {
    foreach ($movie['times'] as $date => $times) {
        if (in_array($date, $showDates)) {
            if (!isset($dateMovies[$date])) {
                $dateMovies[$date] = [];
            }
            $dateMovies[$date][] = [
                'title' => $title,
                'times' => $times
            ];
        }
    }
}

2. 生成排期HTML结构（PHP） #

基于预处理后的数组生成指定格式的DIV容器：

// 循环生成每个日期的排期
foreach ($dateMovies as $date => $moviesList) {
    echo '<div class="schedule-date" id="date-' . htmlspecialchars($date) . '">';
    echo '<h3>' . htmlspecialchars($date) . '</h3>';
    echo '<ul>';
    foreach ($moviesList as $movie) {
        echo '<li>' . htmlspecialchars($movie['title']);
        echo '<ul>';
        foreach ($movie['times'] as $time) {
            echo '<li>' . htmlspecialchars($time) . '</li>';
        }
        echo '</ul></li>';
    }
    echo '</ul></div>';
}

3. 生成日期选择下拉框（PHP） #

生成用于切换日期的表单控件：

echo '<select id="date-selector">';
echo '<option value="">选择日期</option>';
foreach ($showDates as $date) {
    echo '<option value="' . htmlspecialchars($date) . '">' . htmlspecialchars($date) . '</option>';
}
echo '</select>';

4. 前端切换逻辑（JavaScript） #

实现选择日期后显示对应排期、隐藏其他排期的功能：

document.getElementById('date-selector').addEventListener('change', function() {
    const selectedDate = this.value;
    const allDateDivs = document.querySelectorAll('.schedule-date');
    
    allDateDivs.forEach(div => {
        if (selectedDate === '') {
            div.style.display = 'block';
        } else {
            div.style.display = div.id === 'date-' + selectedDate ? 'block' : 'none';
        }
    });
});

5. 基础样式（可选CSS） #

添加简单样式优化页面展示：

.schedule-date {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.schedule-date ul {
    list-style-type: none;
    padding-left: 20px;
}
.schedule-date li li {
    margin: 5px 0;
    color: #555;
}
#date-selector {
    padding: 8px;
    font-size: 16px;
    margin-bottom: 20px;
}

内容的提问来源于stack exchange，提问作者Mathew Smith