jQuery樹形結(jié)構(gòu)和下拉框插件結(jié)合制作點擊文本框彈出樹結(jié)構(gòu)的下拉分類菜單選中賦值效果代碼。ps:下載文件中還提供了多種模式,單選、多選,回調(diào)。
使用方法:
1、head引入css文件
<!--基礎(chǔ)樣式-->
<link type="text/css" rel="stylesheet" href="css/demo.css">
<!--主要樣式-->
<link type="text/css" rel="stylesheet" href="css/metroStyle/metroStyle.css">
2、head引入js文件
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="MultipleTreeSelect.js"></script>
<script type="text/javascript">
<!--默認(rèn)設(shè)置樹結(jié)構(gòu)分類菜單內(nèi)容-->
var zNodes = [
{id: 1, pId: 0, name: "火之國", open: true}, // open: true表示下面有子文件
{id: 11, pId: 1, name: "木葉忍者", open: true }, // open: true表示下面有子文件
{id: 111, pId: 11, name: "鳴人" },
{id: 112, pId: 11, name: "佐助"},
{id: 12, pId: 1, name: "木葉暗部" },
{id: 121, pId: 12, name: "鼬"},
{id: 122, pId: 12, name: "卡卡西"},
{id: 2, pId: 0, name: "沙之國", open: true}, // open: true表示下面有子文件
{id: 21, pId: 2, name: "千代婆婆"},
{id: 26, pId: 2, name: "我愛羅"} ,
{id: 22, pId: 2, name: "沙之國忍者", open: true}, // open: true表示下面有子文件
{id: 221, pId: 22, name: "手鞠"},
{id: 222, pId: 22, name: "勘九郎"},
{id: 3, pId: 0, name: "水之國"},
{id: 4, pId: 0, name: "土之國"}
];
var defaults = {
zNodes: zNodes,
height:233 // 默認(rèn)自定義下拉框高度
}
<!--調(diào)用插件方法-->
$(document).ready(function () {
$("textarea").drawMultipleTree(defaults);
});
</script>
3、body引入HTML代碼
<textarea style="width: 300px;overflow:hidden;" checks="1,11,2,23" textLabel="jasontext" type="text" readonly></textarea>