layui多选下拉框，多选-Toy模板网

这篇具有很好参考价值的文章主要介绍了layui多选下拉框，多选。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 先下载xm-select.js，如果layui.js中有就不用了，js中的xmSelect对象在引用xm-select.js后可以直接使用

2 添加多选下拉框标签

 <div class="layui-inline" style="width: 350px;">
                <label class="layui-form-label">
                    行业类型：
                </label>
                <div class="layui-input-inline">
                    <div id="IndustryType" class="xm-select-demo" style="width: 300px"></div>
                </div>
            </div>

3 js上获取下拉数据文章来源地址https://www.toymoban.com/news/detail-506083.html

 $.ajax({
            Type: "post",
            url: "/Collect/getBid_ProjectType",
            success: function (res) {
                var res = JSON.parse(res);
                var dataIndustryType = [];
                for (var i = 0; i < res.data.length; i++) {
                   
                    if (res.data[i].reid == 3) {
                        dataIndustryType.push(res.data[i]);
                    }
                }
                webdata = xmSelect.render({
                    el: '#IndustryType',
                    tips: '请选择',
                    prop: {
                        name: 'name',
                        value: 'id',
                    },
                    filterable: true,
                    data: dataIndustryType,
                    on: function (data) {
                        var arr = data.arr;
                        if (arr.length > 0) {
                            //先查看arr中有没有空的数组元素
                            for (var j = 0; j < arr.length; j++) {
                                if (arr[j].id == undefined) {
                                    arr.splice(j,1);
                                }
                            }

                            for (var i = 0; i < arr.length; i++) {
                                if (oarr=="") {
                                    oarr += arr[i].id + ',';//寻找键值对赋值
                                }
                                else if (arr[i].id != undefined && oarr.indexOf(arr[i].id) < 0) {
                                    oarr += ','+ arr[i].id + ',';//寻找键值对赋值
                                }
                            }
                        //选中项id
                            oarr = oarr.substring(0, oarr.length - 1);
                        }
                       //记录选中项id
                        $('#IndustryTypeid').val(oarr);
                       
                    },
                });

                //栏目选中，修改时获取之前的数据，设置选中
                var IndustryType = $('#oldIndustryType').val();
                var IndustryTypearr = IndustryType.split(',');
                for (var i = 0; i < IndustryTypearr.length; i++) {
                    var a = IndustryTypearr[i];
                    if (a != '0' && a != '') {
                    //下面代码是 动态选中
                        webdata.append([a]);
                    }
                }

                $("#SourceAuthority").val($('#oldSourceAuthority').val());

                form.render();
            }
        })

到了这里，关于layui多选下拉框，多选的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！