zTree插件之多選下拉菜單實例代碼
css和js

復制代碼 代碼如下:

<!--ztree樹結構-->
<link type="text/css" href="assets/ztree/css/zTreeStyle.css">
<link 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>
    <input readonly type="text" value="">
    <a type="button"><i></i></a>
</div>

<div>
    <div>
        <ul></ul>   
    </div>
    <div>
        <div><a href="javascript:void(0)">確定</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: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:"石家莊"},
        {id:42, pId:4, name:"保定"},
        {id:43, pId:4, name:"邯鄲"},
        {id:44, pId:4, name:"承德"},
        {id:5, pId:0, name:"廣東省", open:false},
        {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:false},
        {id:61, pId:6, name:"福州"},
        {id:62, pId:6, name:"廈門"},
        {id:63, pId:6, name:"泉州"},
        {id:64, pId:6, 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 = 0;
        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(0,-1);
        $("#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>0)) {
                    hideMenu();
                }
            });
    });
</script>