ibase4j实现下拉多选框

ibase4j实现下拉多选

实现的功能如图所示:
在这里插入图片描述

需要下载:formSelects-v4.js和formSelects-v4.css的文件,下载地址:https://download.csdn.net/download/qq_22175485/10902880

  1. 引入formSelects-v4.js和formSelects-v4.css:在这里插入图片描述注意:文件目录的路径在这里插入图片描述

  2. xx.html重要代码片段:
    在这里插入图片描述

  <link rel="stylesheet" href="css/layui.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/formSelects-v4.css" />
<script src="layui.js"></script>
<script src="./js/jsencrypt.min.js"></script>
<script>
  //config的设置是全局的
  layui.config({
    base: 'js/' //假设这是你存放拓展模块的根目录
  }).extend({ //设定模块别名
    common: 'common', // 一些封装函数
    ajax: 'ajax', // 封装的ajax
    formSelects: 'formSelects-v4'
  });

  layui.use(['form', 'table', 'jquery', 'common', 'ajax', 'laytpl', 'fixed', 'menu', 'formSelects'], function () {
    var form = layui.form
      , table = layui.table
      , $ = layui.jquery
      , common = layui.common
      , ajax = layui.ajax
      , laytpl = layui.laytpl
      , menu = layui.menu
      , isLyjl = false
      , formSelects = layui.formSelects
      /*监听select选择*/
    layui.formSelects.on('select7_1', function(id, vals, val, isAdd, isDisabled){
    	//id:           点击select的id
        //vals:         当前select已选中的值
        //val:          当前select点击的值
        //isAdd:        当前操作选中or取消
        //isDisabled:   当前选项是否是disabled
    }, true);

	/*下拉列表封装*/
    var select = {
      getList: function (role_id) { // 获取下拉列表
    	  ajax.post('/xx/xxx/roleList', {}, true, function (req) {
          		var roleIds = [];
          		//role_id的格式:1,2,3
          		if(role_id != null){
        	  		roleIds = role_id.split(',');
          		}
          		//req返回格式:{data:[{name:"",value:""},{name:"",value:""}],httpCode:200,msg:"请求成功"}
          		//其中name和value值属性名不能改变
        		formSelects.data('select7_1', 'local', {arr : req.data});
          		formSelects.value('select7_1', roleIds,true);
          		form.render('select');
       		});
      }
     };

ajax.post('/xx/xxxx/queryById', { id:  1}, true, function (req) {
            if (req.httpCode == 200) {
            	select.getList(req.data.role_id);
            }else{
            }
        });

 });
 </script>
 <body class="layui-layout-body">
  <div class="layui-layout layui-layout-admin">

    <div class="layui-body wrap">
      <!-- 内容主体区域 -->
      <div class="content">
        <div class="contentNav"
			<form class="layui-form checkMenu" action="" id="formId">
				<div class="layui-form-item">
				    <label class="layui-form-label">用户角色</label>
				    <div class="layui-input-inline">
				        <select name="roleId" id="role_id" xm-select="select7_1" xm-select-search="" lay-filter="role_id" lay-verType="tips" lay-verify="required">
				          
				        </select>
				    </div>
				</div>
				    
    		</form>
        </div>
      </div>
      <!-- 内容主体区域结束 -->
    </div>
  </div>
</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值