如何在HTML的datalist元素中隐藏option的label属性显示

问题原因 #

HTML规范中，datalist下option的label属性默认就是用于给用户展示的提示文本，浏览器会自动将其渲染在下拉选项中，所以会出现同时显示label和value的情况。

可用解决方案 #

方案1：替换为自定义data属性（全浏览器兼容，最推荐） #

如果你设置label属性仅用于JS读取业务数据，不需要原生渲染，直接将label改为data-*自定义属性即可，浏览器不会将自定义属性内容展示在下拉列表中，你仍可正常读取对应数值。
修改后代码示例：

<div class="container text-center">
    <div>
        <input class="form-control w-25 mx-auto rounded-pill" list="lst" placeholder="type" id="selectStation">
        <datalist id="lst" class="data">                  
            <option data-label="W1" value="a">
            <option data-label="S1" value="b">
            <option data-label="S2" value="c">        
        </datalist>
    </div>
</div>

JS读取对应label值的方法：

// 选中option后读取对应自定义label值
const input = document.getElementById('selectStation');
const selectedOption = document.querySelector(`#lst option[value="${input.value}"]`);
const labelVal = selectedOption.dataset.label;

方案2：保留原生label属性，添加option文本内容（适配Chrome/Edge等Webkit内核浏览器） #

如果有历史代码依赖必须保留原生label属性，可以给每个option添加和value一致的文本内容，Webkit内核浏览器会优先展示option文本，不会显示label属性内容。
修改后代码示例：

<datalist id="lst" class="data">                  
    <option label="W1" value="a">a</option>
    <option label="S1" value="b">b</option>
    <option label="S2" value="c">c</option>        
</datalist>

方案3：JS动态转存label值（全浏览器兼容，无需修改原有HTML结构） #

如果不想改动原有HTML代码，可以添加一段JS，页面加载完成后自动把所有option的原生label值转存到自定义属性，再移除原生label属性，即可隐藏显示，同时不影响业务数据读取。
JS代码示例：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('#lst option').forEach(option => {
    // 存储原有label值到自定义属性
    option.dataset.label = option.label;
    // 移除原生label属性避免显示
    option.removeAttribute('label');
  });
})

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