select3搜索下拉樹

根據昨天項目中使用的ztreejs下拉樹，今天想着能實現搜索功能的下拉樹，

網上查了半天 感覺都不是很符合自己的要求，所以決定自己修改，終於大功告成，

通過修改實現了既能單選搜索的下拉樹 又能多選搜索的下拉樹，並且下拉樹的菜單項從后台獲取數據，簡直棒極了！

下面說下我如何實現的

1、項目先引入css  js  基於jquery的所以需要引入jqueryjs

<link rel="stylesheet" type="text/css" href="css/select3.css"/>

<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="./js/select3.js" charset="utf-8"></script>

2、布局簡單極了 只需要一個<input type="text" id="test1" />  可以根據自己項目要求布局，當然功能實現了 布局就是小case了。。。

3、然后我根據select3js需要的格式，把從后台得到數據進行整理 主要就用了三個字段 ：菜單id 父菜單id  名稱

然后把整理的數據再次整理為select3js需要的格式  通過遞歸的方式進行整理數據

 

 

 4、然后調用就可以了

$('#test1').select3({
    treeData:shu(arr)
 });

實現以后為下圖所示