layui树形结构下拉菜单选择特效代码下载


layui树形结构下拉菜单选择特效代码下载
layui树形结构下拉菜单选择特效代码下载以及树形结构、下拉菜单选择等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../layui/css/layui.css">

2. 引入JS

<script src="../layui/layui.all.js"></script>
<script src="../layui/layui.all.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></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">
	<body style="padding:10px;">
		<div class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">组织结构1</label>
				<div class="layui-input-block ">
					<input id="tree1" type="text" placeholder="请选择" value="" readonly="readonly" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="" class="layui-form-label">组织结构2</label>
				<div class="layui-input-block ">
					<input type="text" id="tree2" lay-filter="tree" class="layui-input">
				</div>
			</div>
			<button type="button" class="layui-btn layui-btn-normal">获取组织结构1 id值</button>
		</div>
		<script>
			layui.config({
				base: './'
			}).extend({
				selectGroupTree: 'selectGroupTree',
			});
			layui.use(['form', 'selectGroupTree'], function() {
				var $ = layui.jquery,
					selectGroupTree = layui.selectGroupTree;
				selectGroupTree.ajax({
					elem: 'tree1', //ID名称
					url: 'tree.json', //数据请求地址
					type: 'get', //请求方式
					dataType: 'json', //数据类型
					data: null, //传递到服务端的数据
					placeholder: '', //占位符
					checkNodeId: '2' //选中的组织ID
				});
				selectGroupTree.ajax({
					elem: 'tree2', //ID名称
					url: 'tree.json', //数据请求地址
					type: 'get', //请求方式
					dataType: 'json', //数据类型
					data: null, //传递到服务端的数据
					placeholder: '请选择2', //占位符
					checkNodeId: null //选中的组织ID
				});
				$('button').click(function() {
					layer.msg($('#tree1').val())
				})
			});
		</script>
	</body>
</html>

相关推荐

发表评论

相关文章