multipleSelect下拉插件的使用

Multiple Select 是一个通过复选框来选择多元素的 jQuery 插件:).
官网地址
导入文件

//本地的
<link rel="stylesheet" type="text/css" href="__PUBLIC__/libs/multiple-select-develop/dist/multiple-select.css">
//线上的
 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
 //本地的
 <script type="text/javascript" src="__PUBLIC__/libs/multiple-select-develop/dist/multiple-select.js"></script>

如果你下拉框点击不显示,可以试试换jquery版本
我实现的是多选的 加一个multiple属性
1.html

　<select id='checkedLevel' style="width:70%;height:34px;" multiple="multiple">
 </select>
 //为了提交数据,把下拉框选中的项的value放在input中  我是需要这么做,你可以不要
 <input type="hidden" class="productinput" name="Brand" value>

2.js

 <script>
        var $select = $('#checkedLevel')
        $brands = "{$[type]form.value1}"; //传过来需要编辑的数据   1,2,3 选中项的value值
        console.log($brands)
        $(function () {
            var $el = $brands.split(',')
            console.log($el)
            var select = []
            var info = []
            var checkall = []
            var isall = false
            window.onload = function () {
				//通过ajax动态获取数据
                $.ajax({
                    url: "/Wallet/BrandProductCoupons/getBrands",
                    type: "POST",
                    success: function (data) {
                        console.log('数据' + JSON.stringify(data))
                        info = data.info
                        for (var i = 0; i < data.info.length; i++) {
                            var $opt = $('<option />', {
                                value: data.info[i].value,
                                text: data.info[i].text
                            }
                            //获取完数据要重新刷新下页面
                            $select.append($opt).multipleSelect('refresh')
                        }
                        //编辑部分
                        if ($el) {
                            console.log(12334)
                            //将获取到的数据显示出来
                              $('#checkedLevel').multipleSelect('setSelects', $el)
                              $el.forEach(item => {
                                select.push(item)
                            })
                            console.log(select);
                            //将选中的项 select数组放在input输入框中,来提交数据
                    		//你可以直接把select提交了就可以  不需要这一步
                           $('.productinput').val(select)
                        }
                        //一定不要忘记重新刷新页面
                        $select.multipleSelect('refresh')
                    }

                });
            }
            $select.multipleSelect({
                addTitle: true, //鼠标点悬停在下拉框时是否显示被选中的值
                selectAll: false, //是否显示全部复选框，默认显示
                name: "value",
                selectAllText: "选择全部", //选择全部的复选框的text值
                allSelected: "全部", //全部选中后显示的值
                //delimiter: ', ', //多个值直接的间隔符，默认是逗号
                placeholder: "Brand", //不选择时下拉框显示的内容
                filter: false, //是否加搜索
                displayValues: false, //是否显示value值
                minimumCountSelected: 7, //select框中最多显示多少个。默认为3
                //显示的数据
                // data: [
                // {
                //     text: 'Option 2',
                //     value: 1
                // },
                // {
                //     text: 'Option 3',
                //     value: 1
                // }
                // ]
                //点击选项的事件  官网上还有很多事件,可以去查找你需要监听的事件
                onClick: function (view) {
                    console.log(view)
                 //通过view中的selected属性的true或false来区分是选中还是取消
                  if (view.selected) {
                    //如果select中没有view.value的的存在 才把view.value的值push进select数组中,为了防止在编辑的时候重复添加
                        if (select.indexOf(view.value) == -1) {
                            select.push(view.value)
                        }
                    } else {
                    //当view.selected为false  取消选中
                     //如果select中有view.value的存在,将view.value那一项从数组中移出
                        if (select.indexOf(view.value) != -1) {
                            select.splice(select.indexOf(view.value), 1)
                        }
                    }
                    //将选中的项 select数组放在input输入框中,来提交数据
                    //你可以直接把select提交了就可以  不需要这一步
                   $('.productinput').val(select)
                },
            });
        })





    </script>

之后又有一个查询的需求,输入框 回车打开下拉框

//input输入监听事件
  var a=''
  $(".input1").bind('input propertychange', function () {
                a = $(".input1").val();
                console.log(a)
            })
            //回车事件绑定
            $('.input1').bind('keydown', function (event) {
                if (event.keyCode == "13") {
                    //回车执行查询
                    console.log('a的值为' + a)
                    //将数据提交获取查询到的数据 
                    //打开下拉框
                    setTimeout(function () {
                        $select.multipleSelect('open')
                    }, 100)

                }
            });