layui下拉多选formSelects使用方法
下载formSelects-v4插件(引入formSelects-v4.css和formSelects-v4.js)
下载地址:https://fly.layui.com/extend/formSelects/#download
<link rel="stylesheet" href="style/formSelects-v4.css"> //引入formSelects-v4样式
<div class="layui-form-item">
<label class="layui-form-label">系统用户</label>
<div class="layui-input-inline">
<select id="sysusers" name="systemUserIds" xm-select-height="36px" xm-select="select2">
<!-- <option value="">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">重庆</option> -->
</select>
</div>
</div>
//注册插件
layui.config({
base: './js/' //路径为插件
}).extend({
formSelects: 'formSelects-v4'
});
//使用插件,在layui.use中添加formSelects
layui.use(['element', 'laydate', 'table', 'layer', 'form', 'laypage', 'upload', 'tree', 'formSelects'], function () {
var element = layui.element
laydate = layui.laydate,
table = layui.table,
layer = layui.layer,
form = layui.form,
upload = layui.upload,
tree = layui.tree,
laypage = layui.laypage,
formSelects = layui.formSelects;
form.render();
formSelects.btns('select2', []);
getSysname: function (typeKey) {
var keys = []
$.ajax({
url: url,
type: "post",
async: true,
data:{typeKey},
success: function (data) {
//console.log(data, '系统用户');
if(data.data){
for (var i = 0; i < data.data.length; i++) { //formSelects-v4只支持name和value两个属性,使用时必须为josn格式属性必须为name和value
var temp = {
"name": data.data[i].systemUserId,
"value": data.data[i].id //value为唯一标识,此处为id
}
keys.push(temp)
}
console.log(keys)
formSelects.data('select2', 'local', { //请求数据后,将数据动态渲染到下拉框中
arr: keys
});
form.render();
}
},
});
},
formSelects.btns('select2', []); //去掉全选等工具条
formSelects.data('select2', 'local', {arr: []}); //清空下拉框数据
formSelects.value('select2',data.data.systemUsers,true); //给下拉框中追加数据,true:如果该值已选中则跳过, 该值未选中则选中;若为false:如果该值没有选中则跳过, 该值被选中则取消选中
其他属性用法见网址:https://hnzzmsf.github.io/example/example_v4.html
layui下拉多选formSelects使用方法的更多相关文章
- layui 下拉框不显示解决方法
添加以下代码 layui.use('form', function(){ var form = layui.form; form.render(); });
- 自己用ul模拟实现下拉多选框,
模拟实现下拉多选框 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- multiSelect 下拉多选插件
multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法.使用方法:1.引用 multiSelect.css及 multiSelect.js.下载地址 http ...
- Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 如下,在datagri ...
- angular2.x 下拉多选框选择组件
angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云 链接: ...
- 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- 自定义实现 PyQt5 下拉复选框 ComboCheckBox
一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...
- 我的第一个jquery插件:下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
- Jqure实现下拉多选
Web ") { try { ...
随机推荐
- MySQL数据库表的设计和优化(上)
一.单表设计与优化: (1)设计规范化表,消除数据冗余(以使用正确字段类型最明显):数据库范式是确保数据库结构合理,满足各种查询需要.避免数据库操作异常的数据库设计方式.满足范式要求的表,称为规范化表 ...
- centos6.8yum 安装mysql
1:查看是否已有mysql版本 rpm -qa | grep mysql 删除mysql 账号和用户组 删除/etc/my.cnf 2:有的话就删除 rpm -e mysql-...... 或者 co ...
- 阿里云ECS服务器活动99元一年(2019年 Hi拼团,拼着买,更划算)
2019年10月22日更新,阿里云推荐有礼活动:ECS突发性能T6-低至99元/年赶紧上车~ 低价高性能,拼着买更划算 点我参加活动>> 购买前领取阿里云幸运券,更有可能享受折上折的优惠. ...
- Asp.net SignalR 实现服务端消息实时推送到所有Web端
ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.实际上 Asp.net SignalR 2 实现 服务端消息推送到Web端, 更加 ...
- Centos安装Python3及设置对应版本pip
安装Python3 安装Python依赖: yum -y install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel ...
- talend工具整理文件并出力文件到Excel当中
问题描述: 每天都会生成一定的txt文件,txt文件当中含有复数个个人的信息,把每个个人信息都抽出来之后放到Excel文件的一览里面. 解决思路: 1.txt文件里面的信息有多件,每一件生成一个临时的 ...
- java中实现在线人数统计
//java 代码public class SessionCounter implements HttpSessionListener { private static int activeSessi ...
- Information retrieval (IR class2)
1. 解析文档一般要分析哪些方面? - 首先分析文档的格式,是docx,html,xml,pdf... - 其次分析文档的语言,是英语,汉语,日语,德语... - 使用的什么字符集,ASCII编码, ...
- linux中LVM介绍及实验过程
LVM LVM这个词不仅一次出现过,在安装Centos时,磁盘分区时,默认分区就是使用LVM方式分区:再一个就是在OpenStack部署时候用到LVM作为后端存储.对LVM的理解还是不太清晰,查询资料 ...
- 简单谈一谈Java内部类的使用原因
使用内部类的原因 学习总得知其所以然,前面的一篇文章中我有提到过关于java内部类的几种用法以及一些示例,但是不明白内部类具体可以做什么,显然学习起来很渺茫,今天的文章简单说一说使用内部类的几个原因, ...