Station与Direction下拉框联动Timeslot下拉框失效问题求助

核心问题分析 #

你的代码未达到预期效果，主要是两个关键错误：

• 站点下拉框无有效value：所有Station选项的value属性为空字符串，导致JS中selectedStation始终是空值，无法匹配stations对象里的站点键名。
• 方向大小写不匹配：JS中stations对象的方向键是Upstream/Downstream（首字母大写），但下拉框的方向选项value是upstream/downstream（全小写），两者无法对应。

修复后的代码 #

修正后的HTML（重点修改Station下拉框的value）

<div class="input-box" id="station-box">
  <span class="details">Station</span>
  <select name="station" id="station" required>
    <option value="Pinagbuhatan">Pinagbuhatan</option>
    <option value="Kalawaan">Kalawaan</option>
    <option value="San Joaquin">San Joaquin</option>
    <option value="Guadalupe">Guadalupe</option>
    <option value="Hulo">Hulo</option>
    <option value="Valenzuela">Valenzuela</option>
    <option value="Lambingan">Lambingan</option>
    <option value="Sta-Ana">Sta-Ana</option>
    <option value="PUP">PUP</option>
    <option value="Quinta">Quinta</option>
    <option value="Lawton">Lawton</option>
    <option value="Escolta">Escolta</option>
  </select>
</div>
<div class="input-box">
  <span class="details">Direction</span>
  <select name="direction" id="direction" required>
    <option value="downstream">Downstream</option>
    <option value="upstream">Upstream</option>
  </select>
</div>
<div class="input-box">
  <span class="details">Timeslot</span>
  <select name="timeslot" id="timeslot" required>
    <option value=""></option>
  </select>
</div>

修正后的JavaScript（统一方向键为小写，匹配下拉框value）

window.onload = function() {
    // Stations and their respective timeslots
    var stations = {
        'Pinagbuhatan': {
            'upstream': ['A', 'B', 'C'],
            'downstream': ['D', 'E', 'F']
        },
        'Kalawaan': {
            'upstream': ['G', 'H', 'I'],
            'downstream': ['J', 'K', 'L']
        }
    };
    
    // Get references to the station, direction, and timeslot dropdowns
    var stationSelect = document.getElementById('station');
    var directionSelect = document.getElementById('direction');
    var timeslotSelect = document.getElementById('timeslot');
  
    // Function to populate the timeslot dropdown based on the selected station and direction
    function populateTimeslots() {
        var selectedStation = stationSelect.value;
        var selectedDirection = directionSelect.value;
        
        // Clear out any existing options
        timeslotSelect.innerHTML = '';
        
        // If both station and direction are selected, and the station exists in the data
        if (selectedStation && selectedDirection && stations[selectedStation]) {
            // Get the timeslots associated with the selected station and direction
            var timeslots = stations[selectedStation][selectedDirection];
            
            // Populate the timeslot dropdown with the timeslots
            timeslots.forEach(function(timeslot) {
                var option = document.createElement('option');
                option.value = timeslot;
                option.textContent = timeslot;
                timeslotSelect.appendChild(option);
            });
        }
    }
    
    // Attach change event listeners to the station and direction dropdowns
    stationSelect.addEventListener('change', populateTimeslots);
    directionSelect.addEventListener('change', populateTimeslots);
      
    // Populate the timeslot dropdown initially
    populateTimeslots();
};

额外优化说明 #

• 增加了stations[selectedStation]的判断，避免选择未配置的站点时出现报错。
• 统一了方向的大小写规则，后续扩展其他站点时只需遵循相同格式即可。

内容的提问来源于stack exchange，提问作者Aldrin Lizardo