如何获取selectize插件下拉框选中option的自定义data属性值

你遇到返回undefined的问题有两个核心原因：

• 你在<option>标签上定义的是data-data属性，属性值是序列化后的JSON字符串，不存在直接的data-param属性，直接调用attr('data-param')自然无法取值
• selectize插件初始化后会隐藏原生<select>元素，自行渲染下拉UI，部分场景下直接操作原生<select>的选中选项可能出现状态不同步的问题，优先使用插件提供的API取值更稳妥

方案1：直接解析原生option的data属性 #

如果你的下拉选项是静态写死在页面中的，可以直接解析data-data属性获取param值，jQuery的data()方法会自动将JSON字符串转成JS对象：

$(document).on('change', '.list_type_op', function () { 
    const selectedOption = $('option:selected', this);
    const nbParam = selectedOption.data('data').param;
    alert(nbParam);
});

方案2：使用selectize官方API取值（更推荐） #

如果你的下拉选项是动态生成、或者用了selectize的自定义配置，用插件自带的API取值兼容性更强：

$(document).on('change', '.list_type_op', function () { 
    // 获取当前select绑定的selectize实例
    const selectizeIns = this.selectize;
    // 获取选中项关联的自定义数据
    const selectedValue = selectizeIns.getValue();
    const nbParam = selectizeIns.options[selectedValue].param;
    alert(nbParam);
});

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