刚刚治好的强迫症，基于layui的无限级联动选择框的实现

分享未结
 1  4607
番茄 VIP 1 2018-04-24
悬赏：0
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui无限级下拉框演示</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">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->  
</head>
<body>

              
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>无限级下拉框演示</legend>
</fieldset>
 
<form class="layui-form" action="" style="padding:20px;">
  <div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item" id="myselect">
    <label class="layui-form-label">联动选择框</label>

  </div>
 
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" type="button" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
          
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
 //无限级分类数据（json格式）
 var categoryJson = [{"id":1,"name":"\u5468\u8fb9\u65c5\u6e38","pid":0,"children":[{"id":7,"name":"\u5e7f\u5dde","pid":1}]},{"id":5,"name":"\u56fd\u5185\u65c5\u6e38","pid":0,"children":[{"id":8,"name":"\u534e\u5317\u5730\u533a","pid":5,"children":[{"id":9,"name":"\u5317\u4eac","pid":8}]}]},{"id":6,"name":"\u51fa\u5883\u65c5\u6e38","pid":0,"children":[{"id":10,"name":"\u4e1c\u5357\u4e9a","pid":6,"children":[{"id":11,"name":"\u9a6c\u6765\u897f\u4e9a","pid":10,"children":[{"id":20,"name":"\u6c99\u5df4","pid":11,"children":[{"id":21,"name":"\u7f8e\u4eba\u9c7c\u5c9b","pid":20,"children":[{"id":22,"name":"\u6f5c\u6c34","pid":21}]}]}]}]}]}];


layui.use(['form','jquery','layer'], function(){
  var form = layui.form
	,$ = layui.jquery
  ,layer = layui.layer

	// 创建一个Select
	var createSelect = function(optionData){
		var html = '';
		html+= '<div class="layui-input-inline">';
		html+= ' <select lay-filter="demo">';
		html+= '  <option value="">请选择</option>';
		for(var i=0;i<optionData.length;i++){
			html+= '  <option value="'+optionData[i].id+'">'+optionData[i].name+'</option>';
		}
		html+= ' </select>';
		html+= '</div>';
		return html;
	}

	// 获取当前option的数据
	var getOptionData = function(catData,optionIndex){
		var item = catData;
		for(var i=0;i<optionIndex.length;i++){
      if('undefined' == typeof item[optionIndex[i]]){
				item = null;
				break;      
      }
      else if('undefined' == typeof item[optionIndex[i]]['children']){
				item = null;
				break;
      }
			else{
				item = item[optionIndex[i]]['children'];
      }
		}
		return item;
	}
  
	// select容器ID
	var $selectWrap = $('#myselect');
	
  // 默认选中值
	var selected = [6,10];
  // 没有默认值
	//var selected = [];
	
	// 创建顶级select
	var html = createSelect(categoryJson);
  $selectWrap.append(html);
	var index=[];
	for(var i=0;i<selected.length;i++){
    // 设置最后一个select的选中值
		$selectWrap.find('select:last').val(selected[i]);
    // 获取该选中值的索引
		var lastIndex = $selectWrap.find('select:last').get(0).selectedIndex-1; 
		index.push(lastIndex);
    // 取出下级的选项值
		var childItem = getOptionData(categoryJson,index);
		// 下级选项值存在则创建select
    if(childItem){
			var html = createSelect(childItem);
			$selectWrap.append(html);
		}
	}
	form.render('select');
	
	
	// 监听select
	form.on('select(demo)',function(data){
		var $thisItem = $(data.elem).parent();
		// 移除后面的select
		$thisItem.nextAll('div.layui-input-inline').remove();
		var index=[];
		// 获取所有select，取出选中项的值和索引
		$thisItem.parent().find('select').each(function(){
			index.push($(this).get(0).selectedIndex-1);
		});
		
		var childItem = getOptionData(categoryJson,index);

		if(childItem){
			var html = createSelect(childItem);
			$selectWrap.append(html);
			form.render('select');
		}
	});
	
	
  // 监听提交
  form.on('submit(demo1)', function(data){
    
    var lastValue = $selectWrap.find('select:last').val();
    console.log(lastValue);		
    
    if(lastValue==''){
      layer.alert('请选择分类');
      return false;
    }
    
    var pathValue =[];
		$selectWrap.find('select').each(function(){
			pathValue.push($(this).val());		
		});
		console.log(pathValue.join(','));
    


    data.field.selectName1 = pathValue.join(',');
    data.field.selectName2 = lastValue;
    
    console.log(data.field);
    return false;
  });

});
</script>

</body>
</html>
回帖
刚刚治好的强迫症，基于layui的无限级联动选择框的实现

温馨通道

最近回贴

友情链接
