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!


相关文章
|
6月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
174 0
|
6月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
163 0
|
6月前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
|
26天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
39 5
|
27天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
1月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
53 0
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
116 1
|
3月前
|
JavaScript 前端开发 测试技术
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
|
4月前
|
JavaScript 前端开发 API
Chrome插件实现问题之 content_script.js能做什么
Chrome插件实现问题之 content_script.js能做什么
|
4月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
41 1