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>

  效果:

 

posted @   三号小玩家  阅读(9708)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
Title
三号小玩家的 Mail: 17612457115@163.com, 联系QQ: 1359720840 微信: QQ1359720840

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示