树形下拉框，结合ztree

1、首先引入jq 以及ztree.js 测试版本的jq是2.1.4

jauery 在线链接
https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.min.js

以下代码为ztree-select.js

/**
 * 下拉树
 * 务必先引入 jQuery 和 zTree
 */
(function($) {

    function TreeSelect() {
        var ts = new Object();
        ts.key = "xxx";
        ts.$input = null;
        ts.$selDiv = null;
        ts.$selUl = null;
        ts.$zTree = null;

        /**
         * 初始化下拉树
         * @param key
         * @param data
         */
        ts.initialize = function(key, data) {
            ts.key = key;
            ts.initInput();
            ts.initTree(data);

            ts.$input.bind("keyup", function() {
                ts.changeInput();
            });

            $("body").bind("click", ts.bodyClick);
        };

        /**
         * 初始化输入框
         */
        ts.initInput = function() {
            ts.$input = $("#" + ts.key);
            var input_w = ts.$input.width();
            var input_h = ts.$input.height();

            ts.$input.parent().css({
                "position": "relative",
                "display": "inline-block",
                "min-width": input_w,
                "min-height": input_h,
                "margin": "auto",
                "vertical-align": "middle"
            });
            ts.$input.css({
                "position": "absolute",
                "margin-left": "2px"
            });

            ts.$input.bind("focus", function() {
                ts.openTree();
            });

        };

        /**
         * 初始化树结构
         * @param data
         */
        ts.initTree = function(data) {
            var window_h = $(window).height();

            var input_x = ts.$input.offset().left;
            var input_y = ts.$input.offset().top;
            var input_w = ts.$input.outerWidth();
            var input_h = ts.$input.outerHeight();
            var div_w = input_w;
            var div_max_h = (window_h - input_y - input_h) * 0.8;

            var html = '<div id="sel_div_' + ts.key + '">' +
                '<ul id="sel_ul_' + ts.key + '" class="ztree"></ul>' +
                '</div>';
            ts.$input.after(html);

            ts.$selDiv = $("#sel_div_" + ts.key);
            ts.$selDiv.offset({
                "left": input_x,
                "top": input_y + input_h + 1 //1px的缝隙
            });
            ts.$selDiv.css({
                "position": "absolute",
                "width": div_w,
                "max-width": div_w,
                "max-height": div_max_h,
                "overflow-x": "auto",
                "overflow-y": "auto",
                "background-color": "#F7F7F7",
                "z-index": 2147483647
            });

            ts.$selUl = $("#sel_ul_" + ts.key);
            ts.$selUl.css({
                "margin": 0,
                "padding": 0
            });

            $.fn.zTree.init(ts.$selUl, {
                callback: {
                    onClick: ts.clickTree
                },
                view: {
                    showLine: true,
                    showTitle: true,
                    selectedMulti: false,
                    expandSpeed: "fast"
                },
                data: {
                    key: {
                        name: "name"
                    },
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid"
                    }
                }
            }, data);

            ts.$zTree = $.fn.zTree.getZTreeObj("sel_ul_" + ts.key);
        };

        /**
         * 改变输入值
         */
        ts.changeInput = function() {
            // var input_val = ts.$input.val();
            // input_val = input_val.trim().toLowerCase();
            // if ("" == input_val) {
            //     ts.$zTree.expandAll(false);
            //     return;
            // }

            var findNode = ts.$zTree.getNodesByFilter(function(node) {
                if (node && node["name"].toLowerCase().indexOf(input_val) > -1) {
                    ts.$zTree.selectNode(node, false); //单一选中
                    return true;
                }
                return false;
            }, true); //只找第一个

            if (findNode && !findNode.isParent) {
                var parentNode = findNode.getParentNode();
                var expands = new Set();
                do { //展开符合的节点及其父、祖节点
                    expands.add(parentNode["id"]);
                    ts.$zTree.expandNode(parentNode, true, false, true);
                    parentNode = parentNode.getParentNode();
                } while (parentNode);

                var openNodes = ts.$zTree.getNodesByFilter(function(node) {
                    if (node && node.isParent && node.open && !expands.has(node["id"])) {
                        return true;
                    }
                    return false;
                }, false); //找一群
                if (openNodes && openNodes.length > 0) {
                    for (var i = 0; i < openNodes.length; i++) {
                        //关闭不符合的其他父节点
                        ts.$zTree.expandNode(openNodes[i], false, true, false);
                    }
                }
            } else {
                ts.$zTree.expandAll(false);
            }
        };

        /**
         * 点击树节点
         */
        ts.clickTree = function(event, treeId, treeNode) {
            if (treeNode && treeNode.isParent) { 可选父级
                ts.$input.val(treeNode["name"]);
                ts.$input.attr("id",treeNode["id"]); //可拿到相应的数据放置在input中
                ts.closeTree();
            }
            if (treeNode && !treeNode.isParent) { //只能选择最后一个层级
                ts.$input.val(treeNode["name"]);
                ts.$input.attr("id",treeNode["id"]);
                ts.closeTree();
            }
        };

        /**
         * 点击输入框和树结构之外的部分
         * @param event
         */
        ts.bodyClick = function(event) {
            var x1 = ts.$input.offset().left;
            var y1 = ts.$input.offset().top;
            var width = ts.$input.outerWidth();
            var height = ts.$input.outerHeight() + ts.$selDiv.outerHeight() + 1; //1px的缝隙
            var x2 = x1 + width;
            var y2 = y1 + height;

            var x = event.clientX;
            var y = event.clientY;
            if (x < x1 || x2 < x || y < y1 || y2 < y) {
                ts.closeTree();
            }
        };

        /**
         * 关闭树结构
         */
        ts.closeTree = function() {
            ts.$selDiv.hide();
        };

        /**
         * 展开数节点
         * @param key
         * @param options
         */
        ts.openTree = function() {
            ts.$selDiv.show();
        };

        /**
         * 树结构位置微调
         */
        ts.treeOffset = function() {
            //TODO
        };

        return ts;
    }

    /**
     * 主调方法
     * @param data
     * @returns {TreeSelect}
     */
    $.fn.treeSelect = function(data) {
        var key = this.attr("id");

        var ts = new TreeSelect();
        ts.initialize(key, data);
        ts.closeTree();

        return ts;
    }

})(jQuery);

2、新建html页面 引入上述三个文件后，手动写一个json此处以省市来展示

function getData() {
        // ajax get data
        var data = [{
            "name": "江苏",
            "pid": 0,
            "id": -1,
            "icon": "images/js.png"
        }, {
            "name": "浙江",
            "pid": 0,
            "id": -2,
            "icon": "images/zj.png"
        }, {
            "name": "上海",
            "pid": 0,
            "id": -3,
            "icon": "images/sh.png"
        }, {
            "name": "苏州",
            "pid": -1,
            "id": 1,
            "icon": "images/sz.png"
        }, {
            "name": "无锡",
            "pid": -1,
            "id": 2,
            "icon": "images/wx.png"
        }, {
            "name": "常州",
            "pid": -1,
            "id": 3,
            "icon": "images/cz.png"
        }, {
            "name": "杭州",
            "pid": -2,
            "id": 4,
            "icon": "images/hz.png"
        }, {
            "name": "宁波",
            "pid": -2,
            "id": 5,
            "icon": "images/nb.png"
        }];
        return data;
    }

3、在页面中调用该定义

<body>
    <div>
        <input id="ts_input">
    </div>
</body>

$(function() {
         var data = getData();
        // 一句话搞定
        $("#ts_input").treeSelect(data);
});

4、同时引入两个图片，文件夹需要跟js同级，文件名称为img

4、展示效果