如何为Semantic UI自动生成下拉框中选中的早6点前时间项加前置图片

我有一段脚本，可根据另一个下拉框的选择为Semantic UI下拉框填充时间选项，代码如下：

document.addEventListener('DOMContentLoaded', function () {

  const fromDropdown = $('#fromtime');
  const toDropdown = $('#totime');


  fromDropdown.dropdown();
  toDropdown.dropdown();


  fromDropdown.on('change', function () {
    const selectedTimeFrom = fromDropdown.dropdown('get value');
    const timeToMenu = toDropdown.find('.menu');


    timeToMenu.empty();


    if (selectedTimeFrom) {
      const times = [
        '00:00', '00:30', '01:00', '01:30',
        '02:00', '02:30', '03:00', '03:30',
        '04:00', '04:30', '05:00', '05:30',
        '06:00', '06:30', '07:00', '07:30',
        '08:00', '08:30', 
        '09:00', '09:30', '10:00', '10:30',
        '11:00', '11:30', '12:00', '12:30',
        '13:00', '13:30', '14:00', '14:30',
        '15:00', '15:30', '16:00', '16:30',
        '17:00', '17:30', '18:00', '18:30',
        '19:00', '19:30', '20:00', '20:30',
        '21:00', '21:30', '22:00', '22:30',
        '23:00', '23:30',
        // Add more time intervals as needed
      ];

      for (const time of times) {
        if (time > selectedTimeFrom) {
          if (time < '06:00') {
            timeToMenu.append(`<div class="item" data-value="${time}">${time}</div>`);
          } else {
            timeToMenu.append(`<div class="item" data-value="${time}">${time}</div>`);
          }
        }
      }


      toDropdown.dropdown('set selected', timeToMenu.find('.item').first().data('value'));
    }
  });
  toDropdown.on('change', function () {
    const selectedTimeTo = toDropdown.dropdown('get value');
     
    
  });
});

请问如何实现：当下拉框中选中的时间早于06:00时，仅在该选中项的显示时间前方添加一张图片？

要实现这个需求，需要调整两个核心逻辑：给早于06:00的下拉选项添加图片，以及同步更新下拉框顶部的选中显示内容。以下是修改后的完整代码：

document.addEventListener('DOMContentLoaded', function () {

  const fromDropdown = $('#fromtime');
  const toDropdown = $('#totime');

  fromDropdown.dropdown();
  toDropdown.dropdown();

  // 替换为你实际的图片路径、样式和替代文本
  const nightTimeIcon = '<img src="night-icon.png" alt="夜间时段" class="ui mini image" style="margin-right: 8px;">';

  fromDropdown.on('change', function () {
    const selectedTimeFrom = fromDropdown.dropdown('get value');
    const timeToMenu = toDropdown.find('.menu');

    timeToMenu.empty();

    if (selectedTimeFrom) {
      const times = [
        '00:00', '00:30', '01:00', '01:30',
        '02:00', '02:30', '03:00', '03:30',
        '04:00', '04:30', '05:00', '05:30',
        '06:00', '06:30', '07:00', '07:30',
        '08:00', '08:30', 
        '09:00', '09:30', '10:00', '10:30',
        '11:00', '11:30', '12:00', '12:30',
        '13:00', '13:30', '14:00', '14:30',
        '15:00', '15:30', '16:00', '16:30',
        '17:00', '17:30', '18:00', '18:30',
        '19:00', '19:30', '20:00', '20:30',
        '21:00', '21:30', '22:00', '22:30',
        '23:00', '23:30',
        // 可按需添加更多时间间隔
      ];

      for (const time of times) {
        if (time > selectedTimeFrom) {
          let itemContent = time;
          // 给早于06:00的选项前置图片
          if (time < '06:00') {
            itemContent = nightTimeIcon + time;
          }
          timeToMenu.append(`<div class="item" data-value="${time}">${itemContent}</div>`);
        }
      }

      const firstItem = timeToMenu.find('.item').first();
      toDropdown.dropdown('set selected', firstItem.data('value'));
      // 初始化选中时同步更新顶部显示
      updateSelectedDisplay(firstItem.data('value'));
    }
  });

  toDropdown.on('change', function () {
    const selectedTimeTo = toDropdown.dropdown('get value');
    // 用户切换选中项时更新顶部显示
    updateSelectedDisplay(selectedTimeTo);
  });

  // 封装更新选中项显示的复用函数
  function updateSelectedDisplay(time) {
    if (time < '06:00') {
      toDropdown.html(`${nightTimeIcon}<span class="text">${time}</span>`);
    } else {
      toDropdown.html(`<span class="text">${time}</span>`);
    }
    // 刷新下拉框组件，确保样式正常
    toDropdown.dropdown('refresh');
  }
});

关键细节说明 #

• 图片定义：nightTimeIcon变量存放图片的HTML代码，你需要替换为自己的图片路径，同时可调整class和style来适配界面风格
• 菜单选项填充：遍历时间列表时，给早于06:00的选项直接添加图片元素
• 选中显示同步：新增updateSelectedDisplay函数，统一处理初始化选中和用户手动选择时的顶部显示逻辑，确保选中项的图片能正确展示
• 组件刷新：更新顶部HTML后调用dropdown('refresh')，避免Semantic UI下拉框出现样式异常

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