转：zTree树控件实战篇：针对多个下拉加载zTree树应该如何做出合理的配置

var setting = {
            view: {
                dblClickExpand: false,
                selectedMulti: true, //是否允许多选
                txtSelectedEnable: false //是否允许选中节点的文字
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick //节点点击事件
            }
        };

        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: true },
            { id: 41, pId: 4, name: "石家庄" },
            { id: 42, pId: 4, name: "保定" },
            { id: 43, pId: 4, name: "邯郸" },
            { id: 44, pId: 4, name: "承德" },
            { id: 5, pId: 0, name: "广东省", open: true },
            { id: 51, pId: 5, name: "广州" },
            { id: 52, pId: 5, name: "深圳" },
            { id: 53, pId: 5, name: "东莞" },
            { id: 54, pId: 5, name: "佛山" },
            { id: 6, pId: 0, name: "福建省", open: true },
            { id: 61, pId: 6, name: "福州" },
            { id: 62, pId: 6, name: "厦门" },
            { id: 63, pId: 6, name: "泉州" },
            { id: 64, pId: 6, name: "三明" }
         ];
       //节点点击事件的实现
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");            
            var nodes = zTree.getSelectedNodes(),
            v = "";
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = null;
            if(CurInput == 1)
            {
               cityObj = $("#citySel");  
               cityObj.attr("value", v);          
            }else
            {
                cityObj = $("#citySelTwo");  
                cityObj.attr("value", v);
             }
            
            return false;
        }
       
       //zTree树的初始化
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

<ul class="list">
                <li class="title">&nbsp;&nbsp;<span class="highlight_red">选择城市时，按下 Ctrl 键可以进行多选</span></li>
                <li class="title">&nbsp;&nbsp;城市1：<input id="citySel" type="text" readonly value=""
                    style="width: 120px;" />
                    &nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a></li>
                <li class="title">&nbsp;&nbsp;城市2：<input id="citySelTwo" type="text" readonly value=""
                    style="width: 120px;" />
                    &nbsp;<a id="menuBtnTwo" href="#" onclick="showMenuTwo(); return false;">选择</a></li>
</ul>

<div id="menuContent" class="menuContent" style="displayx: none; position: absolute;">
        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">
        </ul>
</div>

//点击“选择”后显示zTree树
        function showMenu() {
            CurInput = 1; //标记第一个文本框
            var cityObj = $("#citySel");
            var cityOffset = $("#citySel").offset();
            //定位zTree外围div容器位置
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
            //绑定页面的鼠标按下事件
            $("body").bind("mousedown", onBodyDown);
        }
        //隐藏zTree外围div容器
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }  
        //判断当前事件来源
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

//城市2相关的下拉配置
        function showMenuTwo() {
            CurInput = 2; //标记第二个文本框
            var cityObj = $("#citySelTwo");
            var cityOffset = $("#citySelTwo").offset();
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");

            $("body").bind("mousedown", onBodyDownTwo);
        }
        function hideMenuTwo() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDownTwo);
        }
        function onBodyDownTwo(event) {
            if (!(event.target.id == "menuBtnTwo" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenuTwo();
            }
        }

//节点点击事件的实现
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");            
            var nodes = zTree.getSelectedNodes(),
            v = "";
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = null;
            //城市1
            if(CurInput == 1)
            {
               cityObj = $("#citySel");  
               cityObj.attr("value", v);          
            }else
            {
                //城市2
                cityObj = $("#citySelTwo");  
                cityObj.attr("value", v);
             }            
            return false;
        }