layui实现下拉复选功能的例子(包括数据的回显与上传)
作者:alsdiuhfeircn 时间:2024-02-24 17:37:10
一、layui下拉复选实现的背景:实现一个管理员拥有多个权限
二、 具体实现:
//依赖资源
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.css" rel="external nofollow" />
<!-- 引入组件 -->
<script src="${pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
//页面显示
<div class="layui-inline">
<label class="layui-form-label" style="color: #666666;width: 70px">角色:</label>
<div class="layui-input-block" style="width: 300px">
<select name="role_id" id="role_id" xm-select-height="36px"
xm-select-search xm-select-skin="default" xm-select="sys_role" lay-filter="sys_role">
</select>
</div>
</div>
//配置路径
layui.config({
base: "${pageContext.request.contextPath }/src/layui-formSelects-master/dist/" //formSelects-v4.js的路径
}).extend({
formSelects: 'formSelects-v4'
}).use(['form','jquery','upload','layer','formSelects'],function(){
var form =layui.form,$ =layui.jquery,upload=layui.upload,layer=layui.layer,formSelects=layui.formSelects;
//从后台数据库中查出后回显
$.ajax({
url: "${pageContext.request.contextPath}/menu/queryall.action",
type: "post",
success: function (data) {
var str= '${sys_user.role_id}';
str_arr= []; //str="1,2,3"
str_arr= str.split(",");//获取那些该选中的数据
for(var i=0;i<data.data.length;i++){
if(data.data[i].status==1){
var option= new Option(data.data[i].role,data.data[i].id); //全部列表信息展示 }
for(var j=0;j<str_arr.length;j++){
if(str_arr[j]==data.data[i].id){
option.setAttribute("selected",true);//确定哪些是选中的
}
}
}
$("#role_id").append(option);
}
formSelects.render();//渲染效果
}
, error: function () {
alert("查询用户角色失败")
}
});
来源:https://blog.csdn.net/alsdiuhfeircn/article/details/100707302
标签:layui,数据,回显,上传
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
javascript实现编写网页版计算器
2024-04-23 09:26:25
Pyecharts绘制可视化地球实现示例
2021-03-18 17:18:48
![](https://img.aspxhome.com/file/2023/2/130792_0s.jpg)
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2023-07-29 00:03:51
php中iconv函数使用方法
2023-06-12 08:11:07
js获取 type=radio 值的方法
2024-04-29 13:18:38
Python 实现两个服务器之间文件的上传方法
2022-04-22 10:32:03
python简单实现最大似然估计&scipy库的使用详解
2022-11-03 23:45:01
![](https://img.aspxhome.com/file/2023/4/80394_0s.jpg)
python实现学生管理系统开发
2021-08-26 20:43:17
2007流行网站导航设计欣赏
2008-02-18 12:20:00
![](https://img.aspxhome.com/file/UploadPic/20082/18/2008218122731730s.jpg)
Django学习笔记之View操作指南
2023-05-29 14:08:47
Go本地测试小技巧解耦任务拆解
2023-08-29 14:09:26
mysql 替换字段部分内容及mysql 替换函数replace()
2024-01-23 19:25:27
Python数据挖掘中常用的五种AutoEDA 工具总结
2022-05-20 02:49:51
![](https://img.aspxhome.com/file/2023/3/102853_0s.png)
python钉钉机器人运维脚本监控实例
2022-08-23 22:19:48
![](https://img.aspxhome.com/file/2023/5/81855_0s.jpg)
python中终止协程和异常处理方式
2022-10-18 05:44:41
详解如何利用docker快速构建MySQL主从复制环境
2024-01-25 08:25:33
扩展Django admin的list_filter()可使用范围方法
2021-05-01 15:10:47
![](https://img.aspxhome.com/file/2023/1/135321_0s.jpg)
MySQL execute、executeUpdate、executeQuery三者的区别
2024-01-23 15:32:11
用FSO操作 xml
2008-09-03 12:26:00
Go语言基础变量的声明及初始化示例详解
2024-04-27 15:46:37