使用JavaScript实现下拉框结束时间随开始时间联动变化

首先注意你提供的HTML代码里所有<option>的value属性都错误地设置成了07:00，这会导致无法正确获取选中的时间值，第一步需要修正这个问题，让每个选项的value和显示文本一致。

接下来是完整的实现代码：

修正后的HTML #

Start Time:
<select name='start' id='start'>
    <option value='07:00'>07:00</option>
    <option value='08:00'>08:00</option>
    <option value='09:00'>09:00</option>
    <option value='10:00'>10:00</option>
    <option value='11:00'>11:00</option>
    <option value='12:00'>12:00</option>
    <option value='13:00'>13:00</option>
    <option value='14:00'>14:00</option>
    <option value='15:00'>15:00</option>
    <option value='16:00'>16:00</option>
    <option value='17:00'>17:00</option>
    <option value='18:00'>18:00</option>
    <option value='19:00'>19:00</option>
    <option value='20:00'>20:00</option>
    <option value='21:00'>21:00</option>
    <option value='22:00'>22:00</option>
    <option value='23:00'>23:00</option>
    <option value='00:00'>00:00</option>
    <option value='01:00'>01:00</option>
    <option value='02:00'>02:00</option>
    <option value='03:00'>03:00</option>
    <option value='04:00'>04:00</option>
    <option value='05:00'>05:00</option>
    <option value='06:00'>06:00</option>
    <option value='07:00'>07:00</option>
</select>
End Time:
<select name='end' id='end'></select>

JavaScript 实现逻辑 #

// 生成完整的时间列表：从07:00到次日07:00
const allTimes = [
    '07:00','08:00','09:00','10:00','11:00','12:00','13:00',
    '14:00','15:00','16:00','17:00','18:00','19:00','20:00',
    '21:00','22:00','23:00','00:00','01:00','02:00','03:00',
    '04:00','05:00','06:00','07:00'
];

const startSelect = document.getElementById('start');
const endSelect = document.getElementById('end');

// 初始化结束时间选项（默认以第一个开始时间为准）
updateEndOptions(startSelect.value);

// 监听开始时间变化事件
startSelect.addEventListener('change', function() {
    updateEndOptions(this.value);
});

// 动态更新结束时间选项的函数
function updateEndOptions(selectedStartTime) {
    // 清空现有选项
    endSelect.innerHTML = '';
    
    // 获取选中时间在列表中的索引
    const startIndex = allTimes.indexOf(selectedStartTime);
    
    // 生成结束时间范围：从选中时间的下一个时间开始，到次日07:00
    let endTimes = [];
    // 如果选中的不是最后一个时间（次日07:00）
    if (startIndex !== allTimes.length - 1) {
        // 从下一个时间开始取到最后一个（次日07:00）
        endTimes = allTimes.slice(startIndex + 1);
    }
    
    // 生成选项并添加到结束时间选择框
    endTimes.forEach(time => {
        const option = document.createElement('option');
        option.value = time;
        option.textContent = time;
        endSelect.appendChild(option);
    });
}

代码说明 #

• 时间列表生成：allTimes数组包含了从07:00到次日07:00的所有小时时间，确保时间顺序正确。
• 初始化处理：页面加载时会根据默认选中的开始时间自动生成对应的结束时间选项。
• 事件监听：当用户改变开始时间的选择时，触发change事件，调用updateEndOptions函数重新生成结束时间选项。
• 动态生成选项：通过indexOf获取选中时间的位置，使用slice截取从下一个时间到次日07:00的所有时间，然后逐个创建<option>元素添加到结束时间选择框中。

比如当选中19:00时，startIndex是12，slice(13)会取出从20:00到07:00的所有时间，正好符合你的需求。

内容的提问来源于stack exchange，提问作者Les Yun