javascript - 请问如下效果的Multiple Select 是如何实现的？在下完全没有一点点思路！！

Question

在下要实现的效果如下图片，但在下是个刚入门一个多月的新手，完全没有思路！求指导

楼主去网上找了好多结果，在Bootstrap找到了类似的，但组长要求必须用Vue去实现，就又懵逼了。

Bootstrap找到的我想要的组件的地址：Multiple Select with Groups（这个地址页面下的Multiple Select with Groups 这个选择器就是楼主想要的）

想改用Vue实现，大家给个思路，感激！

Answer 1

http://monterail.github.io/vu... 这个？

Answer 2

两个方面，
第一，Bootstrap的下拉组件是通过遍历原生select的信息，来生成html模拟原生select的ui，而且生成的html操作的行为会反馈到原生select里面（比如会触发select的change事件，获取选中的信息什么的），所以前期select数据的渲染最为重要。

第二， 首页要明白vue是数据驱动的，所以把select的数据放在vue组件（或者初始对象）的data里面，让其为响应数据（这样是为了通过vue监测数据的变化，而触发相应的操作），在页面初始的时候，根据vue生命周期沟子函数，去触发Bootstrap select组件渲染，这样的话，相互之间通过数据关联到一块。

大体思路就是： 把select数据交给vue设置为响应数据，然后通过vue把数据输出给原生select标签，通过vue的钩子函数去触发Bootstrap select组件的初始化，然后Bootstrap select组件的操作行为会触发数据的改变，而数据的改变会触发vue对数据的监听事件，这样就通过对一套数据的监听实现对双向事件（组件事件和vue事件）的触发

Answer 3

HTML <select> 标签
通过 <optgroup> 标签把相关的选项组合在一起：

宝马官网的移动端效果实现，你查一下

Answer 4

你这个组件首先要有一份列表数据用来选，还有一个列表用于记录选了什么，两个方法，一个选中，将选项查到选中列表，还有一个清除，将选项从选中列表中清除。