js中select多选的值怎么映射?

var item = {
    id: 1,
    role: ['1', '2'],
    name: ''
};
var options = [{
    roleid: '1',
    label: '黄金糕'
}, {
    roleid: '2',
    label: '双皮奶'
}, {
    roleid: '3',
    label: '蚵仔煎'
}];

item的role对应option的roleid,如何获取的role对应的label集合的信息,赋值到name里面?js的方法
这更像是模拟一个select多选的方法

阅读 597
评论
    3 个回答

    解决方法便如上面那位所述,但这里吾辈还是想说一些问题

    • 模拟 select > options 应该使用 Map 而非 Array,因为 Map 是有序且高效的(根据 key 获取 value
    • 使用 Set 而非 Array 存放 id 列表,因为在多次选中时可能会存在重复
    • 既然有了 role 用来存 option 列表,那么显示值 name 应该是绑定到 role 上的,一旦发生变化立即重新计算(例如 vuejs 中的 watch
    const item = {
      id: 1,
      role: new Set([1, 2]),
      name: '',
    }
    const options = new Map()
      .set(1, '黄金糕')
      .set(2, '双皮奶')
      .set(3, '蚵仔煎')
    
    function calcName(role) {
      return role.map(k => options.get(k)).join(',')
    }
    
    const obj = new Proxy(item, {
      set(_, k, v) {
        if (k === 'role') {
          Reflect.set(_, 'name', calcName(Array.from(v)))
        }
        Reflect.set(_, k, v)
      },
    })
    
    item.name = calcName(Array.from(item.role))
    console.log(obj.name)
    obj.role = [1]
    console.log(obj.name)
    // 此处并未实现深度监听
    obj.role.add(2)
    console.log(obj.name)
      • 1.3k
      item.name = []
      item.role.forEach(role => {
        let option = options.find(op => op.roleid === role)
        option && item.name.push(option.label)
      })
        item.name = item.role.reduce((acc, cur) =>
            acc += options.find(item => item.roleid === cur).label + ',', '')
          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章