如何获取与设置BsMultiSelect控件的选项自定义属性值

问题根因 #

你在options数组里定义的myattr属于自定义字段，不在bsMultiselect默认的选项配置识别范围内，库渲染选项DOM时不会自动把这类自定义字段挂到标签属性上，所以直接调用.attr('myattr')会返回undefined。能正常拿到text是因为text是库内置的标准字段，会被渲染为选项显示文本。

具体实现方法 #

两种方案都能满足需求，根据场景选即可： #

方案1：配置属性渲染规则（需要把自定义属性挂到DOM上时用） #

初始化组件时新增getOptionAttributes配置项，显式告诉组件需要把哪些自定义字段渲染为DOM属性，修改install方法里的初始化代码：

var install = function () {
  $languages.bsMultiSelect({
    options: options,
    getDisabled: function () { return disabled },
    getIsOptionDisabled: function (o) { return o.disabled },
    getIsOptionHidden: function (o) { return o.hidden },
    // 新增以下配置，返回需要挂载到选项标签的属性集合
    getOptionAttributes: function(opt) {
      return {
        myattr: opt.myattr
        // 后续加其他自定义属性直接在这个对象里补就行
      }
    }
  });
}

配置完成后组件渲染选项时会自动把myattr写到对应DOM标签上，你原来写的DOM遍历获取逻辑就能正常拿到值，不会再返回undefined。 #

方案2：直接读源数据（更稳定，推荐优先用） #

所有选项数据本来就存在你定义的options源数组里，完全不需要绕DOM查询，直接从源数据过滤选中项即可，不会因为组件版本更新、DOM结构变动导致代码失效：

const itemName = [];
const attrData = [];
// 先拿组件实例同步UI选中状态到数据源，避免数据和UI不一致
const msInstance = $languages.data("DashboardCode.BsMultiSelect");
if (msInstance) msInstance.updateSelected();
// 遍历源数组取选中项数据
options.forEach(item => {
  if (item.selected) {
    itemName.push(item.text);
    attrData.push(item.myattr);
  }
})

动态修改自定义属性方法 #

运行时要修改自定义属性值，直接操作options数组对应项即可：

• 如果用方案1（DOM挂载属性），修改完数组字段后调用组件实例的updateOptions()方法触发重绘，DOM上的属性就会同步更新
• 如果用方案2（直接读源数据），修改完数组值直接使用即可，不需要额外操作

示例代码：

// 例：修改索引为0的选项的myattr值
options[0].myattr = "修改后的自定义属性值";
const msInstance = $languages.data("DashboardCode.BsMultiSelect");
if (msInstance) msInstance.updateOptions();

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