0


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();
            }
        })
标签: layui javascript 前端

本文转载自: https://blog.csdn.net/zhang123csdn/article/details/127904317
版权归原作者 zhang123csdn 所有, 如有侵权,请联系我们删除。

“layui多选下拉框,多选”的评论:

还没有评论