bootstrap input 下拉树 下拉菜单 下拉列表

效果图：

如图，显示了整个树形图，加号可以收缩子节点，可以使用tag属性可以在后面显示存在几个子节点，我这边没有使用这个tag属性，这个input下拉树形图，需要导入bootstrap-treeview.js和bootstrap-treeview.css文件，这边附上下载链接http://download.csdn.net/detail/qq_34117825/9734853，也可以在网上搜索获得，流程就是先定一个input组件，然后再添加一个div默认隐藏，之后点击，显示树形下拉列表，不多说，上干货！

代码部分：

<input type="text" id="txt_departmentname" name="txt_departmentname" class="form-control" value="" onclick="$('#treeview').show()" placeholder="分类名称"><div id="treeview" style="display: none;">

var data1 = [];$(function() {$.ajax({type : "post",url : "/receiverShow/findTree.action",success : function(data, status) {if (status == "success") {data1 = eval("[" + data + "]");}},error : function() {toastr.error('Error');},});});function buildDomTree() {var data = [];var root = "所有分类";function walk(nodes, data) {if (!nodes) {return;}$.each(nodes, function(id, node) {var obj = {id : id,text : node.name != null ? node.name : root// tags : [ node.isLeaf == true ? node.// + ' child elements'// : '' ]};if (node.isLeaf = true) {obj.nodes = [];walk(node.children, obj.nodes);}data.push(obj);});}walk(data1, data);return data;}$("#txt_departmentname").click(function() {var options = {bootstrap2 : false,showTags : true,levels : 5,showCheckbox : true,checkedIcon : "glyphicon glyphicon-check",data : buildDomTree(),onNodeSelected : function(event, data) {$("#txt_departmentname").val(data.text);$("#treeview").hide();}};$('#treeview').treeview(options);});