如何通过JavaScript为动态创建的<option>元素添加属性

new Option()构造函数返回的是标准的HTMLOptionElement实例，和document.createElement('option')创建的元素完全一致，你只需要把创建好的选项实例暂存到变量中，完成属性、事件绑定后再插入下拉框即可，不需要改动原有循环的核心逻辑。

完整实现代码 #

for(var index in response.rates) {
    // 暂存创建好的option实例，不要直接插入下拉框
    const option = new Option(index, index);

    // 绑定事件
    // 注意：<option>本身不触发onselect事件，选中相关逻辑建议绑定在父级<select>上，若需要给选项单独绑定交互事件可参考以下写法
    option.onclick = function() {
        // 选项点击触发的自定义逻辑
        console.log('当前点击的选项值：', this.value);
    }
    // 也可使用addEventListener绑定任意支持的事件
    // option.addEventListener('mouseenter', () => { /* 鼠标移入选项的逻辑 */ })

    // 添加原生标准属性
    option.className = 'rate-option';
    option.id = `rate-${index}`;
    // 举个例子：禁用除CNY外的所有选项
    option.disabled = index !== 'CNY';

    // 添加自定义属性
    // 对于data-*规范的自定义属性，直接操作dataset即可
    option.dataset.rate = response.rates[index]; // 把对应汇率存在自定义属性上
    option.dataset.tag = '自定义标签内容';
    // 非标准自定义属性可以用setAttribute方法添加
    option.setAttribute('custom-prop', '任意自定义属性内容');

    // 所有属性、事件处理完成后，再插入下拉框，和原有逻辑一致
    select.options[select.options.length] = option;
}

注意事项 #

<option>元素本身没有独立的select事件，选项选中的触发逻辑需要绑定在父级<select>元素上，在事件回调中可以拿到当前选中的选项，读取之前绑定的自定义属性执行对应逻辑：

select.addEventListener('change', function() {
    const selectedOpt = this.selectedOptions[0];
    // 读取之前存在option上的自定义汇率属性
    console.log('当前选中货币的汇率：', selectedOpt.dataset.rate);
    // 执行选中后的业务逻辑
})

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