第一步：
1.上官网下载。
2.插件引用，当下载的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css
第二步：建立table格式
<table id="example-advanced">
<tr data-tt-id="1">
<td>大家电</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>---电视</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td>---洗衣机</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1">
<td>---冰箱</td>
</tr>
</table>
第三步：引入JS
/* 初始化数据 */
$("#example-advanced").treetable({ expandable: true })/* 高亮显示 */$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected")
$(this).toggleClass("selected")
})/* 点击展开&&关闭 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll')return false">展开</a>
<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll')return false">关闭l</a>
首先说树形结构，国内有个开源的js控件叫zTree，支持复选。然后下拉框你可能需要自己做一个（html输入框+右边的一个图标按钮）。
最后，用一个隐藏的div把树形结构包起来，这个div设置成绝对定位，在下拉框右侧选择按钮的单击事件处理函数里，显示这个隐藏的div，并把它的位置设置成在下拉框下面就行了。
思路就是这样，要么楼主可以找找有没有其他更现成的控件，extjs4我记得有类似的，但是他的复选功能不太符合中国习惯，也许现在的版本改好了，你可以查查试试看。
