layui 第三方组件平台

返回首页 发布组件

多级联动,只要查出具有父子关系的数据集便可以使用此联动插件,包含选择父级出现子级,默认选中等,省市区联动也可以用

文档

先来一组效果图

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<style>body{padding:20px;}</style>
</head>
<body>
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item"></div>
<div class="layui-form-item test-region"></div>
<div class="layui-form-item test-region1"></div>
<div class="layui-form-item test-region2"></div>
<div class="layui-form-item test-region3"></div>
</form>

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: 'js/',
})
layui.use(['interact'],function(){
var interact = layui.interact;
var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
interact.render({
elem : '.test-region',
title : '选择联动',
data : data,
name : 'region',
});
interact.render({
elem : '.test-region1',
title : '选择省市区',
data : data,
name : 'region1',
hint : ['请选择省份','请选择城市','请选择县/区'],
});
interact.render({
elem : '.test-region2',
title : '选择联动',
data : data,
name : 'region1',
hint : ['第一级','第二级','第三级'],
});
interact.render({
elem : '.test-region3',
title : '选择联动',
data : data,
name : 'region1',
selected : [1,4,11],
hint : ['第一级','第二级','第三级'],
});
})
</script>
</body>
</html>
体验地址: http://www.g-tf.cn/lay/interact.html