下拉框内显示树状图

https://codepen.io/jx915/pen/yjwMdJ

HTML

<div style="position: relative;margin:90px;">
    <input id="orgName" class="org-select" onclick="showTree()"  readonly > 
    <!-- 模拟select点击框 以及option的text值显示-->
    <i class="trg"style="position: absolute;"></i>
    <!-- 模拟select右侧倒三角 -->
    <input id="orgCode" type="hidden" name="orgCode" />
    <!-- 存储 模拟select的value值 -->

    <!-- zTree树状图 相对定位在其下方 -->
    <div class="ztree"  style="display:none; position: absolute;border:1px solid #4aa5ff;width:200px;">
        <ul id="treeDemo"></ul>
    </div>  
</div>

CSS

.trg{
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 6px solid black;;
    position: absolute;
    left:181px;
    top:8px;
    
}
.org-select{
    cursor: default;
    z-index: -1;
    width:200px;
}

JS

    function showTree(){
        if($('.ztree').css('display') == 'none'){
            $('.ztree').css('display','block'); 
        } else{
            $('.ztree').css('display','none'); 
        }
        $("body").bind("mousedown", onBodyDownByActionType); 
    }
    function onBodyDownByActionType(event) {  
        if (event.target.id.indexOf('treeDemo') == -1){  
            if(event.target.id != 'orgName'){
                hideTree(); 
            } 
        }  
    }
    function hideTree() {  
        $('.ztree').css('display','none');
        $("body").unbind("mousedown", onBodyDownByActionType); 
        return false;
    } 
    function zTreeOnClick(event, treeId, treeNode) {
        $('#orgName').val(treeNode.name);
        $('#orgCode').val(treeNode.Id)
        hideTree();  
    };
    
    var orgList =[
        { id:1, pId:0, name:"父节点1 - 展开", open:true},
        { id:11, pId:1, name:"父节点11 - 折叠"},
        { id:111, pId:11, name:"叶子节点111"},
        { id:112, pId:11, name:"叶子节点112"},
        { id:113, pId:11, name:"叶子节点113"},
        { id:114, pId:11, name:"叶子节点114"},
        { id:12, pId:1, name:"父节点12 - 折叠"},
        { id:121, pId:12, name:"叶子节点121"},
        { id:122, pId:12, name:"叶子节点122"},
        { id:123, pId:12, name:"叶子节点123"},
        { id:124, pId:12, name:"叶子节点124"},     
    ];
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        //回调
        callback: {
            onClick: zTreeOnClick
        },
        view: {
            fontCss: { fontSize: "14px" }
        }
    };
    //节点点击事件
    
    $(document).ready(function () {
        //初始组织树状图
        $.fn.zTree.init($("#treeDemo"), setting, orgList);
    });