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上获取下拉数据

 $.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();
            }
        })

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui多选下拉框组件是一款基于Layui框架开发的多选下拉框组件,它可以让用户在下拉框中选择多个选项,同时还支持搜索功能,方便用户快速定位所需选项。 该组件的使用非常简单,只需要在页面中引入相关的JS和CSS文件,并按照一定的格式配置数据即可。以下是一个简单的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多选下拉框组件示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <div class="layui-form-item"> <label class="layui-form-label">多选下拉框</label> <div class="layui-input-block"> <select name="test" xm-select="multi" xm-select-search> <option value="">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> </div> </div> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> layui.use(['form', 'xmSelect'], function(){ var form = layui.form; var xmSelect = layui.xmSelect; xmSelect.render({ el: 'select[name="test"]', tips: '请选择', searchTips: '搜索选项', filterable: true, data: [ {name: '选项1', value: '1'}, {name: '选项2', value: '2'}, {name: '选项3', value: '3'}, {name: '选项4', value: '4'}, {name: '选项5', value: '5'} ] }); }); </script> </body> </html> ``` 在上面的示例中,我们使用了Layui框架和xmSelect组件,同时在HTML中定义了一个多选下拉框。在JavaScript中使用xmSelect.render方法对该下拉框进行渲染,并配置了相关的参数,如提示语、搜索提示语、数据等。 总的来说,Layui多选下拉框组件是一款非常实用的组件,可以极大地提升用户的交互体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值