combo-tree是一款jQuery带多选和过滤功能的树状结构下拉框插件。通过该插件，可以在下拉框中生成指定数据结构的目录树，提供单选和多选，以及过滤功能。它的特点有：
- 在下拉框中显示树状结构。
- 支持单选和多选。
- 返回选择数据的 title 或 id 数组。
- 带过滤功能。
- 数据源使用json格式数据。
- 可以通过键盘控制。
使用方法
在HTML文件中引入下面的文件。
<link rel="stylesheet" href="css/style.css"><script src="js/jquery.min.js" type="text/javascript"></script><script src="js/icontains.js" type="text/javascript"></script><script src="js/comboTreePlugin.js" type="text/javascript"></script>
HTML结构
<input type="text" id="example" placeholder="Select">
javascript
定义数据结构。
var SampleJSONData = [{ id: 0, title: 'choice 1 '}, { id: 1, title: 'choice 2', subs: [ { id: 10, title: 'choice 2 1' }, { id: 11, title: 'choice 2 2' }, { id: 12, title: 'choice 2 3' } ]}, { id: 2, title: 'choice 3'}, { id: 3, title: 'choice 4'}, { id: 4, title: 'choice 5'}, { id: 5, title: 'choice 6', subs: [ { id: 50, title: 'choice 6 1' }, { id: 51, title: 'choice 6 2', subs: [ { id: 510, title: 'choice 6 2 1' }, { id: 511, title: 'choice 6 2 2' }, { id: 512, title: 'choice 6 2 3' } ] } ]}, { id: 6, title: 'choice 7'}]; 然后通过下面的方法来进行初始化插件。
// 单选comboTree1 = $('#example').comboTree({ source : SampleJSONData});// 多选comboTree1 = $('#example').comboTree({ source : SampleJSONData, isMultiple: true}); 获取数据。
// Array, One title/id, or False value returnvar selectedTitles = comboTree1.getSelectedItemsTitle();var selectedIds = comboTree1.getSelectedItemsId();
销毁插件。
// To remove plugincomboTree1.destroy();
combo-tree插件的github网址为：https://github.com/kirlisakal/combo-tree
