layui下拉多选框xm-select.js插件的使用

简介: layui下拉多选框xm-select.js插件的使用

创建容器

  • xm-select-demo,选择容器
  • 隐藏赋值取值表单;
 <div id="selected_box" class="layui-input-inline xm-select-demo" style="width:150px;"><input type="hidden" id="poi_category_id"></div>

异步获取代码

  //获取分类;
        $.ajax({
            type: 'get',
            url: "./api/api.php?act=getCategory&token=3cab7ce4142608c0f40c785b5ab5ca24",
            data: {},
            dataType: "json",
            success: function (res) {
                var data = [];
                for (var i = 0; i < res.data.length; i++) {
                    data.push({name: res.data[i].category_name, value: res.data[i].category_id});
                }
        xmSelect.render({
                    el: '#selected_box',
                    theme: {
                        color: 'rgba(255, 87, 34,0.8)',
                    },
                    language: 'zn',
                    filterable:true,
                    data: data,
                    on: function(data){
                        var selectArr = data.arr;
                        var seachArr = [];
                        for (var j = 0; j < selectArr.length; j++) {
                            seachArr.push(selectArr[j].value)
                        }
                        $("#poi_category_id").val(seachArr.toString());
                    }
                })
            },
            error: function (err) {
                console.log(err)
            }
        });


赋值表单

$("#poi_category_id").val(seachArr.toString());

lockdatav Done!


相关文章
|
1月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
56 0
|
1月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
88 0
|
1月前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
28 0
|
8月前
|
前端开发 JavaScript 容器
|
4天前
|
JavaScript 前端开发 Java
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
|
1月前
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
72 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
|
1月前
|
JavaScript
js的插件
js的插件
19 1
|
1月前
|
JavaScript 测试技术
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
|
8月前
|
前端开发 JavaScript 索引
|
8月前
|
JavaScript 前端开发 Go
如何开发你的第一个Vue.js插件:完整指南
如何开发你的第一个Vue.js插件:完整指南
50 0