咨询：为动态生成的下拉菜单选项添加aria-label的实现方法

嘿，我看了你遇到的问题啦，其实你的思路方向完全没问题，只是可能有几个小细节没注意到，导致aria-label没正确生效。咱们一步步来解决：

首先，先说说你当前尝试的代码里的小问题：你在forEach循环里每次都重新创建dayLabels对象，虽然这本身不会报错，但有点冗余；另外，你可能没把生成的下拉菜单元素添加到DOM里，或者没正确调用函数，导致元素根本没出现在页面上，自然看不到aria-label的效果。

下面给你一个完善后的实现方案，核心是把短日和长日的映射关系抽出来复用，同时确保aria-label正确设置，还要把元素添加到DOM中：

// 定义短日缩写到完整名称的映射，抽出来可以复用，后期维护也方便
const DAY_FULL_NAMES = {
  'Mon': 'Monday',
  'Tue': 'Tuesday',
  'Wed': 'Wednesday',
  'Thu': 'Thursday',
  'Fri': 'Friday',
  'Sat': 'Saturday',
  'Sun': 'Sunday'
};

function WorkHours() {
    const startDayLabel = createLabel('startDayLabel', 'Start Day:', 'whlabel');
    const startDayMenu = createDropdown('startDayMenu', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], '', 'Mon');
    const endDayLabel = createLabel('endDayLabel', 'End Day:', 'whlabel');
    const endDayMenu = createDropdown('endDayMenu', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], '', 'Fri');    

    // 一定要把创建的元素挂载到页面DOM中！这是很多人容易忽略的点
    // 你也可以挂载到页面指定的容器里，比如document.getElementById('某个容器id')
    const container = document.createElement('div');
    container.append(startDayLabel, startDayMenu, endDayLabel, endDayMenu);
    document.body.appendChild(container);
}

function createLabel(forId, text, className) {
    const label = document.createElement('label');
    label.htmlFor = forId;
    label.textContent = text;
    label.className = className;
    return label;
}

function createDropdown(id, options, className = '', defaultValue = '') {
    const select = document.createElement('select');
    select.id = id;
    select.className = className;
    // 给下拉框本身也添加可访问性标签，屏幕阅读器用户能直接知道这个下拉框的用途
    select.setAttribute('aria-label', id.includes('start') ? 'Select start day' : 'Select end day');

    options.forEach(option => {
        const opt = document.createElement('option');
        opt.value = option;
        opt.textContent = option;
        
        // 根据短日缩写找到对应全称，设置aria-label
        const fullDayName = DAY_FULL_NAMES[option];
        if (fullDayName) {
            opt.setAttribute('aria-label', fullDayName);
        }

        if (option === defaultValue) {
            opt.selected = true;
        }
        select.appendChild(opt);
    });
    return select;
}

// 调用函数生成下拉菜单元素
WorkHours();

几个关键说明： #

• 把DAY_FULL_NAMES映射抽出来放在外部，避免在循环里重复创建对象，既高效又方便后续维护（比如要修改日全称的话，只改这一处就行）
• 给<select>元素本身也添加了aria-label，提升整体的可访问性，屏幕阅读器用户能直接识别下拉框的用途
• 重点补充了元素挂载到DOM的逻辑：如果只创建元素但不添加到页面，元素根本不存在于浏览器的DOM树中，自然看不到任何效果
• 用id.includes('start')来判断下拉框类型，比硬写完整id更灵活，就算后续id有小调整也不用改这部分逻辑

如果之前你的代码没生效，大概率是没把元素添加到DOM里，或者没调用WorkHours函数。现在用这个修改后的代码，每个<option>都会被正确添加上aria-label，比如<option value="Mon" aria-label="Monday" selected>Mon</option>，完全符合你的需求。

备注：内容来源于stack exchange，提问作者user5349170