layui的下拉-多选
网址:
https://hnzzmsf.github.io/example/example_v4.html
1.下载代码:
2.整合layui
3.代码整合:
<link rel="stylesheet" href="/css/formSelects-v4.css" />
<!--角色--> <div class="layui-form-item"> <label class="layui-form-label">添加角色</label> <div class="layui-input-inline" style = "width:280px;"> <select name="roleid" xm-select="roleid" id="roleid"> <option value="">请选择</option> </select> </div>
<script src="/layuiadmin/layui/layui.js"></script> <script> layui.config({ base: '/layuiadmin/' //静态资源所在路径 }).extend( { index: 'lib/index' //主入口模块 },{ formSelects: 'formSelects-v4' } ).use(['index', 'form','formSelects'], function(){ var $ = layui.$ ,form = layui.form ; var formSelects = layui.formSelects; form.verify({ name: function(value, item){ var param = { name: $("#name").val() } console.log(param) var checkResult = ""; $.ajax({ url: "/sysUser/isExist", type: "GET", data: param, async: false, success: function(result) { if(result.code==200&&result.data){ checkResult = "该名称已存在"; } }, error: function() { } }); return checkResult; } }); //添加角色。 $.ajax({ type: "post", url: "/sysRole/list", data: {page: 1, limit: 1000}, success: function (result) { if (result.code == 200) {// qnId $.each(result.data, function (i, v) { var data={}; console.log(i+" : "+v.name); formSelects.data('roleid', 'local', { arr: [ {"name": "北京", "value": 1}, {"name": "上海", "value": 2}, {"name": "分组-2", "type": "optgroup"}, {"name": "xsw", "value": 3}, {"name": "xxx", "value": 4}, {"name": "roleid", "value": 5} ] }); // $("#roleid").append("<option value='" + v.id + "'>" + v.name + "</option>"); }); form.render('select'); } } }); //..省略代码若干.. }) </script>
效果:
---------------------------------------------------------------------------
国之殇,未敢忘!
南京大屠杀!
731部队!
以及核污染水排海等一系列全无人性的操作,购买他们的食品和为它们提供帮助只会更加变本加厉的害你,呼吁大家不要购买日本相关产品
昭昭前事,惕惕后人
吾辈当自强,方使国不受他人之侮!
---------------------------------------------------------------------------
作者:三号小玩家
出处:https://www.cnblogs.com/q1359720840/
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。 版权信息