<!--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>

<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>

<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:, pId:, name:"北京"},

        {id:, pId:, name:"天津"},

        {id:, pId:, name:"上海"},

        {id:, pId:, name:"重庆"},

        {id:, pId:, name:"河北省", open:false},

        {id:, pId:, name:"石家庄"},

        {id:, pId:, name:"保定"},

        {id:, pId:, name:"邯郸"},

        {id:, pId:, name:"承德"},

        {id:, pId:, name:"广东省", open:false},

        {id:, pId:, name:"广州"},

        {id:, pId:, name:"深圳"},

        {id:, pId:, name:"东莞"},

        {id:, pId:, name:"佛山"},

        {id:, pId:, name:"福建省", open:false},

        {id:, pId:, name:"福州"},

        {id:, pId:, name:"厦门"},

        {id:, pId:, name:"泉州"},

        {id:, pId:, name:"三明"}

    ];

    function setFont(treeId, treeNode) {

        if (treeNode && treeNode.isParent) {

            return {color: "blue"};

        } else {

            return null;

        }

    }

    function showMenu(){

        var cityObj = $("#citySel");

        var cityOffset = $("#citySel").offset();

        $("#DropdownMenuBackground").css({left:cityOffset.left+"px",top:cityOffset.top+cityObj.outerHeight()+"px"}).slideDown("fast");

    }

    function reloadTree(){

        hideMenu();

        zTree1 = $("#dropdownMenu").zTree(setting, zNodes);

    }

    function hideMenu() {

        $("#DropdownMenuBackground").slideUp("fast");

    }

    function zTreeOnBeforeClick(treeId, treeNode) {

        return false;

    }

    function enter(){

        var str = "";

        var nodes = zTree1.getCheckedNodes();

        var i = ;

        do{

            str = str+nodes[i].name+",";

            if(nodes[i].isParent&&nodes[i].checked){

                i = i+nodes[i].nodes.length;

            }

            else{

                i++;

            }

        }while(i<nodes.length)

        str = str.slice(,-);

        $("#citySel").val(str);

    }

    $(document).ready(function(e) {

        reloadTree();

        $("#menuBtn").bind("click",

            function(){

                if($("#DropdownMenuBackground").css("display") == "none"){

                    showMenu();

                }

                else{

                    hideMenu();

                }

            }

        );

        $("body").bind("mousedown",

            function(event){

                if (!(event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>)) {

                    hideMenu();

                }

            });

    });

</script>