如何根据某<option>的data属性隐藏其之前的<option>选项

我通过PHP生成时间段下拉选项，会对照数据库标记已预订的时段——给这类<option>添加data-time属性，属性值表示需要删除该选项之前的多少个时段选项（用于预留厨房备餐时间）。

当前生成的HTML结构 #

<select class="form-control" id="selectTimeslot">
   <option value="18:00">18:00</option>
   <option value="18:30">18:30</option>
   <option value="19:00">19:00</option>
   <option disabled value="19:30" data-time="2">19:30</option>
   <option value="20:00">20:00</option>
</select>

期望的目标结构 #

当data-time="2"时，删除该选项前的2个<option>，最终得到：

<select class="form-control" id="selectTimeslot">
   <option value="18:00">18:00</option>
   <option value="19:30" data-time="2">19:30</option>
   <option value="20:00">20:00</option>
</select>

我只会根据value删除特定<option>，但不知道如何处理多个带有不同data-time属性的选项，尝试过nth-child方法但没成功，求帮忙解决。

解决方案 #

原生JavaScript实现

核心思路：找到所有带data-time的<option>，先收集需要删除的前置元素再批量删除（避免删除过程中索引混乱），同时移除已预订选项的disabled属性：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带data-time属性的option
  const targetOptions = document.querySelectorAll('#selectTimeslot option[data-time]');
  
  targetOptions.forEach(option => {
    const deleteCount = parseInt(option.dataset.time, 10);
    if (isNaN(deleteCount) || deleteCount <= 0) return;

    // 收集当前option之前的deleteCount个兄弟option
    const toDelete = [];
    let currentSibling = option.previousElementSibling;
    
    while (toDelete.length < deleteCount && currentSibling) {
      toDelete.push(currentSibling);
      currentSibling = currentSibling.previousElementSibling;
    }

    // 批量删除收集到的元素
    toDelete.forEach(el => el.remove());
    // 移除disabled属性，匹配目标结构
    option.removeAttribute('disabled');
  });
});

jQuery实现（如果项目已引入jQuery）

利用jQuery的prevAll()方法快速选取前置兄弟元素，处理起来更简洁：

$(document).ready(function() {
  // 遍历所有带data-time的option
  $('#selectTimeslot option[data-time]').each(function() {
    const deleteCount = parseInt($(this).data('time'), 10);
    if (isNaN(deleteCount) || deleteCount <= 0) return;

    // 选取当前元素之前的deleteCount个option并删除
    $(this).prevAll('option').slice(0, deleteCount).remove();
    // 移除disabled属性
    $(this).removeAttr('disabled');
  });
});

关键注意点 #

• 必须在DOM完全加载后执行代码，否则无法找到目标元素；
• 采用先收集再删除的方式，避免删除元素后后续元素索引变化导致的错误；
• 处理完后移除disabled属性，确保已预订时段的选项状态符合目标结构。

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