記錄一個功能實現程式碼，我這邊前端用的是layui，需要實現的效果如下：

需求：當點選選擇地區的時候會出現如上圖的下拉選單。

分析：首先肯定給這個輸入框加監聽，click方法，然後將ztree的div顯示，這裡的重點應該是怎麼設計這個ztree使其能夠顯示在輸入框的下面顯示。這部分的程式碼也是在網上找到的。

實現步驟：

①：輸入框和ztree的div程式碼

<div class="layui-input-inline">
　　<input type="text" name="busArea" id="busArea" lay-verify="required"
 
 placeholder="請選擇地區" autocomplete="off" class="layui-input">
</div>

<div id="treeDiv" style="position: absolute; display: none; width: 190px; height: 300px; z-index: 9999; background-color: #F7F7F7; overflow: auto">
　　<ul id="mytree" class="ztree"></ul>
</div>

②：點選事件以及載入ztree的方法（資料是使用ajax從後端調的）

$().ready(function() {

            var divTree = $("#treeDiv");
            $("#busArea").click(function() {
                var x = $(this).offset().left + 0;
                var y = $(this).offset().top + 40;
                divTree.css({
                    left : x + "px", top : y + "px" }); divTree.slideDown("slow");// 滑動方式顯示元素  }); divTree.hover(function() { }, function() { divTree.slideUp("slow");// 滑動方式隱藏元素  }); GetTree(); }
 
);

function GetTree() {
            $.ajax({
                type : "POST",
                dataType : "json",
                url : "xxxxxxxxxxxxxxxx",
                async : false,
                success : function(data) {
                    zTree = $.fn.zTree.init($("#mytree"), setting, data);
                    //展開所有節點
                    zTree.expandAll(zTree);
                },
                error : function(error) {
                    layer.msg('系統錯誤！', {
                        icon : 2,
                        time : 1500
                    })
                }
            });
        }

ztree初始化配置程式碼就不貼了，和正常的寫法一樣。