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 = "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>

　　效果: