layui的下拉-多选
网址:
1 | https: //hnzzmsf.github.io/example/example_v4.html |
1.下载代码:
2.整合layui
3.代码整合:
1 | <link rel= "stylesheet" href= "/css/formSelects-v4.css" /> |
1 2 3 4 5 6 7 8 | <!--角色--> <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <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 中国大陆许可协议进行许可。 版权信息
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库