combo-tree是一款jQuery带多选和过滤功能的树状结构下拉框插件。通过该插件，可以在下拉框中生成指定数据结构的目录树，提供单选和多选，以及过滤功能。它的特点有：
在下拉框中显示树状结构。
支持单选和多选。
返回选择数据的title或id数组。
带过滤功能。
数据源使用json格式数据。
可以通过键盘控制。
使用方法
在HTML文件中引入下面的文件。
<linkrel="stylesheet"href="css/style.css">
<scriptsrc="js/jquery.min.js"type="text/javascript"></script>
<scriptsrc="js/icontains.js"type="text/javascript"></script>
<scriptsrc="js/comboTreePlugin.js"type="text/javascript"></script>
HTML结构
<inputtype="text"id="example"placeholder="Select">
javascript
定义数据结构。
varSampleJSONData=[
{
id:0,
title:'choice1'
},{
id:1,
title:'choice2',
subs:[
{
id:10,
title:'choice21'
},{
id:11,
title:'choice22'
},{
id:12,
title:'choice23'
}
]
},{
id:2,
title:'choice3'
},{
id:3,
title:'choice4'
},{
id:4,
title:'choice5'
},{
id:5,
title:'choice6',
subs:[
{
id:50,
title:'choice61'
},{
id:51,
title:'choice62',
subs:[
{
id:510,
title:'choice621'
},{
id:511,
title:'choice622'
},{
id:512,
title:'choice623'
}
]
}
]
},{
id:6,
title:'choice7'
}
];
然后通过下面的方法来进行初始化插件。
//单选
comboTree1=$('#example').comboTree({
source:SampleJSONData
});
//多选
comboTree1=$('#example').comboTree({
source:SampleJSONData,
isMultiple:true
});
获取数据。
//Array,Onetitle/id,orFalsevaluereturn
varselectedTitles=comboTree1.getSelectedItemsTitle();
varselectedIds=comboTree1.getSelectedItemsId();
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery