layselect
/
index.html

<html>
<head>
  <meta charset="utf-8">
  <title>Layselect Demo</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <!-- 引入 layui.css -->
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  <style>
	  .more-item{
		  display:-webkit-flex;display:flex;flex-wrap:nowrap;align-items:center;
	  }
  </style>
</head>
<blockquote class="layui-elem-quote">
	<h1>Layselect 展示示例</h1>
	<div>作者：Darker.Wang</div>
	<div>联系：872694792@qq.com</div>
	<div>背景：项目过程中，select的下拉框的数据基本是可配置的，之前使用easyui时对select的数据通过一个url即可获取到数据，非常方便，切换到layui没有相应的功能。特写了这个组件，需要的自行下载引用。
	使用方式：将layselect.js文件放到项目中指定的位置（也可直接放到layui的lay文件夹中直接使用），放到其他地方的遵循layui使用规范，如下：
	<pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode="">layui.config({base: '../js/layui_exts/'}).extend({
  regionSelect: 'regionSelect/regionSelect'
}).use([''],function(){})</pre>
</div>
</blockquote>
<form class="layui-form layui-form-pane" action="" id="productForm">
  <div class="layui-form-item">
    <div class="layui-inline">
	    <label class="layui-form-label">分组展示</label>
	    <div class="layui-input-inline">
	      <select name="unit" id="unit" lay-filter="unit" multiple="multiple"></select>
	    </div>
    </div>
    <div class="layui-inline">
	    <label class="layui-form-label">一般展示</label>
	    <div class="layui-input-inline">
	      <select name="subjectType" id="subjectType" lay-filter="subjectType"></select>
	    </div>
    </div>
  </div>
  <div class="layui-form-item">
	<div class="layui-inline">
	    <label class="layui-form-label">禁用映射</label>
	    <div class="layui-input-inline">
	      <select name="forbiType" id="forbiType" lay-filter="forbiType"></select>
	    </div>
	</div>
	<div class="layui-inline">
      <label class="layui-form-label">自定义数据</label>
      <div class="layui-input-inline">
        <select name="orderData" id="orderData" lay-filter="orderData" multiple></select>
      </div>
	</div>
  </div>
  <div class="layui-form-item">
  	<div class="layui-inline">
   	 	<label class="layui-form-label">联动类型</label>
	    <div class="layui-input-inline">
	      <select name="producttype1" id="producttype1" lay-filter="producttype1"></select>
	    </div>
    </div>
    <div class="layui-inline">
	    <div class="layui-input-inline">
	      <select name="producttype2" id="producttype2" lay-filter="producttype2"></select>
	    </div>
    </div>
    <div class="layui-inline">
	    <div class="layui-input-inline">
	      <select name="productType" id="productType" lay-filter="productType"></select>
	    </div>
  	</div>
  </div>
</form>
<blockquote class="layui-elem-quote">
<div style="font-size:18px;margin-left:10px;">码云地址：<a href="https://gitee.com/godbirds/layselect">https://gitee.com/godbirds/layselect</a></div>
<div class="layui-btn-container" style="font-size:18px;margin-left:10px;">
  云服资源：
  <button type="button" class="layui-btn" onclick="window.open('https://www.aliyun.com/activity/ambassador/share-mck?userCode=b2yi9nin')">阿里云</button>
  <button type="button" class="layui-btn" onclick="window.open('https://curl.qcloud.com/8uAH327K')">腾讯云</button>
  <button type="button" class="layui-btn" onclick="https://curl.qcloud.com/BMQ1xM4L')">新客户礼包</button>
  <button type="button" class="layui-btn" onclick="window.open('https://curl.qcloud.com/6SgyKcjl')">腾讯云数据库</button>
  <button type="button" class="layui-btn" onclick="window.open('https://curl.qcloud.com/lzzx3NJW')">礼品兑换</button>
</div>
</div>
<blockquote>
<h1>&nbsp;使用代码参考</h1>
<pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode="">
  //如果放到layui.lay中，不用config引入，当成原生组件layui.use直接使用
  layui.config({
  	base:'js/modules/'
  }).extend({
  	layselect:'layselect'
  }).use(['jquery','form','layer','layselect'], function(){
  	var $=layui.jquery,select=layui.layselect,form=layui.form,layer=layui.layer;
  		//分租类型指定选中项
  		select.render({
  			elem:"#unit",
  			url:'json/groupshow.json',//归属类型
  			select:"0-1",//指定默认选择项的索引（从0开始），分租时用类似 0-1表示默认选中，"-"前面0是第一个分租，后面1是第一个分租中子集合的第二个元素
  			success:function(data){
  				console.log(data);
  			},
  			onselect:function(key,value){
  				layer.msg("选择了："+key+value); //这里content是一个普通的String
  			}
  		});
  		//一般展示
  		select.render({
  			  elem:"#subjectType",
  			  url:'json/common.json',//归属类型
  			  select:10000,//指定默认选择项的索引
  			  format:function(data){
  				  return data;
  			  },
  			  success:function(data){},
  			  onselect:function(data){
  				layer.msg("选择了："+data);
  			  }
  		  });
  		  //不请求URL自定义数据
  		select.render({
  			  elem:"#orderData",
  			  //url:'',//归属类型
  			  option:[
  				  {code:'1',codeName:'1-第一个'},
  				  {code:'2',codeName:'2-第二个'},
  				  {code:'3',codeName:'3-第三个'},
  				  {code:'4',codeName:'4-第四个',select:true},
  				  {code:'5',codeName:'5-第五个'},
  				  {code:'6',codeName:'6-第六个'}],
  			  select:"0",//确认默认项：option内部select=true的优先级高于外部select指定索引,最终的默认选项是4-第四个
  			  onselect:function(data){
  				  layer.msg("选中了："+data);
  			  }
  		});
  		  //映射案例
  		  select.render({
  			  elem:"#forbiType",
  			  url:'json/forbidden.json',//店铺列表
  			  format:function(row){
  				  return{
  					  code:row.id,
  					  status:row.status,
  					  codeName:row.name
  				  };
  			  }
  		  });
  		  select.render({
  			  elem:"#producttype1",
  			  url:'json/producttype.json',//产品类型
  			  onselect:function(value){//优先级高于form.on(select(obj))
  				  $('#producttype2').empty();//二级先清空，否则加载不到时还是原来的，根据需求清空
  				  select.render({
  					  elem:"#producttype2",//加载二级类型
  					  url:'json/producttype-'+value+".json",
  					  onselect:function(value2){
  						  console.log("value="+value+"value2="+value2)
  						  $('#productType').empty();//同时清空实际产品类型
  						  select.render({
  							  elem:"#productType",//加载明细类型(三级菜单)
  							  url:'json/producttype-'+value+'-'+value2+'.json'
  						  });
  					  }
  				  });
  			  }
  		  });
  	});
</pre>
<!-- 引入 layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
//如果放到layui.lay中，不用config引入，当成原生组件layui.use直接使用
layui.config({
	base:'js/modules/'
}).extend({
	layselect:'layselect'
}).use(['jquery','form','layer','layselect'], function(){
	var $=layui.jquery,select=layui.layselect,form=layui.form,layer=layui.layer;
		//分租类型指定选中项
		select.render({
			elem:"#unit",
			url:'json/groupshow.json',//归属类型
			select:"0-1",//指定默认选择项的索引（从0开始），分租时用类似 0-1表示默认选中，"-"前面0是第一个分租，后面1是第一个分租中子集合的第二个元素
			success:function(data){
				console.log(data);
			},
			onselect:function(key,value){
				layer.msg("选择了："+key+value); //这里content是一个普通的String
			}
		});
		//一般展示
		select.render({
			  elem:"#subjectType",
			  url:'json/common.json',//归属类型
			  select:10000,//指定默认选择项的索引
			  format:function(data){
				  return data;
			  },
			  success:function(data){},
			  onselect:function(data){
				layer.msg("选择了："+data);
			  }
		  });
		  //不请求URL自定义数据
		select.render({
			  elem:"#orderData",
			  //url:'',//归属类型
			  option:[
				  {code:'1',codeName:'1-第一个'},
				  {code:'2',codeName:'2-第二个'},
				  {code:'3',codeName:'3-第三个'},
				  {code:'4',codeName:'4-第四个',select:true},
				  {code:'5',codeName:'5-第五个'},
				  {code:'6',codeName:'6-第六个'}],
			  select:"0",//确认默认项：option内部select=true的优先级高于外部select指定索引,最终的默认选项是4-第四个
			  onselect:function(data){
				  layer.msg("选中了："+data);
			  }
		});
		  //映射案例
		  select.render({
			  elem:"#forbiType",
			  url:'json/forbidden.json',//店铺列表
			  format:function(row){
				  return{
					  code:row.id,
					  status:row.status,
					  codeName:row.name
				  };
			  }
		  });
		  select.render({
			  elem:"#producttype1",
			  url:'json/producttype.json',//产品类型
			  onselect:function(value){//优先级高于form.on(select(obj))
				  $('#producttype2').empty();//二级先清空，否则加载不到时还是原来的，根据需求清空
				  select.render({
					  elem:"#producttype2",//加载二级类型
					  url:'json/producttype-'+value+".json",
					  onselect:function(value2){
						  console.log("value="+value+"value2="+value2)
						  $('#productType').empty();//同时清空实际产品类型
						  select.render({
							  elem:"#productType",//加载明细类型(三级菜单)
							  url:'json/producttype-'+value+'-'+value2+'.json'
						  });
					  }
				  });
			  }
		  });
	});
</script>
</html>