自己写下拉复选框组件

需求：下拉框，能够支持多个选择

如图，样式自己可以调整

思路：

1、需要一个最外层，包裹放值得输入框以及下拉组件

2、可以用flex布局，上下放输入框和下拉组件，也可以定位下拉组件

3、下拉组件用的ul li，li里包裹着input类型为checkbox的框，以及span展示值，这里有点需要优化，点当行应该都选中框，现在是点框才勾选

4、默认值是当前价，可以存一个全局变量，value=['0']，也可以在存一个值得data=['当前价'],后端要的是0这种形式也就是value，前端展示在框的是data这样的数据，当然也可以用对象[{value:'0',name:'当前价'}]这种数据结构存，也比较正规一些，我这里用二个数组来说明

5、拿到data值后，要回显到框里，并且要自动勾选符合的框，回显框里的值可以用data.join(',')，框可以取li 下面的input，遍历元素，把input的value值和data或者value对比，这里看你存的什么，比如data.includes*(input.value)为true，input.checked = true，就把框选中了

• 下面看一下代码

下拉组件数据

listData={
   '0':'当前价',     //默认显示
   '1':'成交总量',
   '2':'成交总额',
   '3':'持仓量',
   '8':'开盘价',
   '9':'最高价',
   'a':'最低价',
   'd':'多档委买卖价量',
   'e':'多档委买卖价'
}

• html

1. 整个结构图参考

 

<div class="right push_fields">
    <input type=&#