使用JavaScript获取HTML的data-sel值打印控制台却返回null的问题求助

AI 小北

2026-8-3

问题原因与解决方案

问题根源

页面加载完成时，默认选中的是第一个<option>（“All”），这个选项没有定义data-sel属性，所以调用getAttribute("data-sel")会返回null。

解决方案

方案1：给默认选项添加`data-sel`属性

直接修改HTML，给“All”选项补上属性：

<div class="filter-select-container">
  <!-- filter selector -->
  <div class="filter-selection-container">
    <select name="select-filter" id="select-filter">
      <option value="filter-all" data-sel="0">All</option>
      <option value="filter-commercials" data-sel="1">Commercials</option>
      <option value="filter-fiction" data-sel="2">Fiction</option>
      <option value="filter-music-videos" data-sel="3">Music Videos</option>
    </select>
  </div>
</div>

方案2：JS逻辑中处理无属性的情况

如果不想修改HTML，可以在代码里判断属性是否存在，避免输出null：

window.onload = function () {
    const select = document.getElementById("select-filter");
    const selectedOption = select.options[select.selectedIndex];
    // 检测属性是否存在，不存在时设置默认值
    const dataSelect = selectedOption.hasAttribute("data-sel") 
        ? selectedOption.getAttribute("data-sel") 
        : "0";
    console.log(dataSelect);
}

方案3：监听选择变化事件（如果需求是获取用户选择后的值）

如果你的目标是获取用户切换选项后的data-sel值，而不是页面加载时的默认值，给select添加change事件监听：

window.onload = function () {
    const select = document.getElementById("select-filter");
    
    select.addEventListener("change", function() {
        const selectedOption = this.options[this.selectedIndex];
        const dataSelect = selectedOption.getAttribute("data-sel");
        console.log(dataSelect);
    });

    // 可选：页面加载时手动触发一次，获取初始值（需给默认项加data-sel）
    // select.dispatchEvent(new Event('change'));
}