zTree插件之多选下拉菜单实例代码

zTree插件之多选下拉菜单实例代码
css和js
代码如下:
<!--ztree树结构-->
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeIcons.css">

<script src="assets/js/jquery.js"></script>

<!--ztree树-->
<script src="assets/ztree/js/jquery.ztree-2.6.js"></script>

html
代码如下:
<div class="input-append">
    <input class="input-medium" id="citySel" readonly type="text" value="">
    <a id="menuBtn" class="btn" type="button"><i class="icon-search"></i></a>
</div>

<div id="DropdownMenuBackground" style="display:none; position:absolute;z-index:999;height:250px; min-width:163px; background-color:white;border:1px solid;">
    <div style="height:220px; min-width:163px; background-color:white;border:1px solid;border-bottom:0px;overflow-y:auto;overflow-x:auto;">
        <ul id="dropdownMenu" class="tree"></ul>   
    </div>
    <div style="height:26px;border:1px #D4D4D4 solid;box-shadow:0 -1px 10px rgba(0,0,0,0.1);background-color:#FAFAFA;background-image:-webkit-linear-gradient(top,#FFF,#F2F2F2);background-repeat: repeat-x;">
        <div align="center"><a href="javascript:void(0)" onclick="enter();hideMenu();" id="enter" class="btn btn-mini btn-inverse" style="margin-top:3px;">确定</a></div>
    </div>
</div>

自定义的js代码
代码如下:
<script type="text/javascript">
    var zTree1;
    var setting = {
        checkable:true,
        checkType : { "Y": "s", "N": "s" },
        isSimpleData: true,
        treeNodeKey: "id",
        treeNodeParentKey: "pId",
        fontCss: setFont,
        callback: {
            beforeClick: zTreeOnBeforeClick,
        }           
    };
    var zNodes = [
        {id:1, pId:0, name:"北京"},
        {id:2, pId:0, name:"天津"},
        {id:3, pId:0, name:"上海"},
        {id:6, pId:0, name:"重庆"},
        {id:4, pId:0, name:"河北省", open:false},
        {id:41, pId:4, name:"石家庄"},