制作下拉多选框

1.下拉框的一些样式

<div class="checkBoxDiv">
                    <span style="font-size:12px;color:#808080;font-weight:normal;">业务类型：</span>
                    <input type="text" readonly autocomplete="off" value="全部" class="checkBoxProject"/>
                    <div  class="checkBox">
                        <ul style="list-style:none;">
                            <li>
                            <input type="checkbox" class="allSelectedItem" id="allSelectedItem" checked=true name="全部" style="margin: 5px;">
                            全部</li>
                            <li>
                            <input type="checkbox" class="selectedItem" id="selectedItem1" name="项目1" checked=true>
                            项目1</li>
                            <li>
                            <input type="checkbox" class="selectedItem" id="selectedItem2" name="项目2" checked=true>
                            项目2</li>
                            <li>
                            <input type="checkbox" class="selectedItem" id="selectedItem3" name="项目3" checked=true>
                            项目3</li>
                        </ul>
                    </div>
                </div>

 单选和多选之间进行选择切换

  // 业务类型下拉
            // 单选
            selectedItem:function(e){
               var me=this
               e.stopPropagation()
               var seletedLength=0
               var dom=me.$el.find(".checkBoxDiv .selectedItem")
               var name=$(e.currentTarget).attr("name")
               var flag1=$(e.currentTarget).is(":checked")
               for(var i=0;i<dom.length;i++){
                var flag=dom.eq(i).is(":checked")
                   if(flag){
                   
                    seletedLength++
                   }
                }
                var index=me.businessType.findIndex(p=>{
                    return p==name
                })
                if(flag1){

                    if(index>-1){
                       
                    }else{
                        me.businessType.push(name)
                    }
                }else {
                    if(index==-1){
                        me.businessType.push(name)
                    }else{
                        me.businessType.splice(index,1)
                        
                    }
                }
               if(seletedLength==3){
                me.$el.find(".checkBoxDiv .allSelectedItem").prop("checked",true)
               }else{
                me.$el.find(".checkBoxDiv .allSelectedItem").prop("checked",false)
               }
               if(me.businessType.length==0){
                me.businessType=['']
               }
               me.$el.find(".checkBoxDiv .checkBoxProject").val(me.businessType.join(","))
               me.queryAccount()
            },
            // 多选
            allSelectedItem:function(e){
                var me=this
                e.stopPropagation()
                var flag=$(e.currentTarget).prop('checked')
                var dom=me.$el.find(".checkBoxDiv .selectedItem")
                if(flag){
                    for(var i=0;i<dom.length;i++){
                        
                        dom.eq(i).prop("checked",true)
                    }
                   me.businessType=['项目1','项目2','项目3']
                }else{
                    for(var i=0;i<dom.length;i++){
                        dom.eq(i).prop("checked",false)
                    }
                    me.businessType=['']
                }
                me.$el.find(".checkBoxDiv .checkBoxProject").val(me.businessType.join(","))
                me.queryAccount()
            },

 最终的效果图