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

分享 未结
1 68
番茄
番茄 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>


回帖

温馨通道

回贴周榜

本周热议
没有相关数据