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!


相关文章
|
7月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
223 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
6月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
9月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
9月前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
173 16
|
9月前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
9月前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
208 1
|
10月前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
99 6
|
10月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
146 5
|
10月前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
91 5
|
10月前
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。