<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>SelectTree Template</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap-select.css" />
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap-treeview.css" />
<!-- 引入html5标签结构，使用bootstrap样式兼容ie8 -->
<!--[if lt IE 9]>
<script type="text/javascript" src="plugins/html5shiv/html5shiv.js"></script>
<script type="text/javascript" src="plugins/html5shiv/respond.js"></script>
<script type="text/javascript" src="js/util/ie8Tools.js"></script>
<![endif]-->
<script type="text/javascript" src="js/base/jquery.js"></script>
<script type="text/javascript" src="plugins/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="plugins/bootstrap/js/bootstrap-select.js"></script>
<script type="text/javascript" src="plugins/bootstrap/js/bootstrap-treeview.js"></script>
<script type="text/javascript" src="plugins/bootstrap/js/bootstrap-selectTree.js"></script>
<script type="text/javascript" src="js/example/selectTree.js"></script>
</head>
<body>
<div>
<h2 class="col-sm-3" style="text-align: center; float: none;">搜索下拉树</h2>
<form id="form" class="form-horizontal" role="form">
<div class="form-group col-sm-12">
<label for="select" class="col-sm-1 control-label">下拉选</label>
<div class="col-sm-2">
<select class="form-control" id="select" name="select"></select>
<!-- <select class="form-control" id="select" name="select" multiple></select> -->
</div>
</div>
<div class="form-group col-sm-12">
<label for="treeview" class="col-sm-1 control-label">树</label>
<div class="col-sm-2">
<div id="treeview" name="treeview"></div>
</div>
</div>
<div class="form-group col-sm-12">
<label for="selectTree" class="col-sm-1 control-label">下拉树</label>
<div class="col-sm-2">
<select class="form-control" id="selectTree" name="selectTree"></select>
<!-- <select class="form-control" id="selectTree" name="selectTree" multiple></select> -->
</div>
</div>
<div class="form-group selectBtnBox col-sm-12">
<div class="col-sm-offset-1 col-sm-3 selectBtn">
<button type="button" class="btn btn-primary" onclick="doSearch();">搜索</button>
<button type="button" class="btn btn-warning" onclick="doClean();">清空</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
//数据
var tree = [
{ text: "父1", tags: ['1'], id: '1',
nodes: [
{ text: "父1子1", tags: ['11'], id: '11',
nodes: [
{ text: "父1孙1", tags: ['111'], id: '111', nodes: null },
{ text: "父1孙2", tags: ['112'], id: '112', nodes: null }
]
},
{ text: "父1子2", tags: ['121'], id: '121', nodes: null }
] },
{ text: "父2", tags: ['2'], id: '2',
nodes: [
{ text: "父2子1", tags: ['21'], id: '21',
nodes: [
{ text: "父2孙1", tags: ['211'], id: '211', nodes: null },
{ text: "父2孙2", tags: ['212'], id: '212', nodes: null }
]
},
{ text: "父2子2", tags: ['221'], id: '221', nodes: null }
] },
{ text: "父3", tags: ['3'], id: '3', nodes: null },
{ text: "父4", tags: ['4'], id: '4', nodes: null },
{ text: "父5", tags: ['5'], id: '5', nodes: null }
];
$(function() {
//1、渲染下拉选
initSelect('select', tree);
//2、渲染树
initTreeview('treeview', tree);
//3、渲染下拉树
initSelectTree('selectTree', tree);
});
</script>
</body>
</html>
bootstrap框架下带搜索功能的下拉树插件
需积分: 50 27 浏览量
2020-04-23
09:24:56
上传
评论 1
收藏 285KB ZIP 举报
bootstrap-selectTree.zip （23个子文件） 
bootstrap-selectTree 
index.html 4KB js base 
jquery.js 287KB example selectTree.js 1KB util ie8Tools.js 3KB plugins bootstrap js bootstrap-treeview.js 33KB bootstrap.js 68KB bootstrap-select.js 110KB bootstrap-selectTree.js 8KB fonts glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB glyphicons-halflings-regular.woff 23KB css bootstrap-select.css 13KB bootstrap-treeview.css 1KB bootstrap.css 143KB html5shiv html5shiv-printshiv.min.js 4KB ie8Tools.js 3KB html5shiv-printshiv.js 16KB html5shiv.min.js 3KB respond.js 8KB respond.min.js 4KB html5shiv.js 10KB资源评论
