layui 单选下拉树

有点长；请耐心看；如果有帮助；请点个赞 谢谢
html

<form class="layui-form">
        <div class="layui-input-block">

            <div id="selectRadio">
                <div class="selectRadioValWrap layui-select-title layui-form-select">
                    <input name="cause_name" lay-reqtext="案由不能为空" lay-verify="required" class="layui-input selectRadioVal"
                        placeholder="请选择" type="text" name="" id="" readonly>
                    <i class="layui-edge"></i>
                </div>
                <div class="selectRadioDom layui-anim layui-anim-upbit">
        
                </div>
            </div>
        </div>
    </form>

css

  /* 单选下拉树 */
        .selectRadioDom {
            display: none;
            position: absolute;
            left: 0;
            top: 42px;
            padding: 5px 0;
            z-index: 899;
            min-width: 100%;
            border: 1px solid #d2d2d2;
            max-height: 300px;
            overflow-y: auto;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
            box-sizing: border-box;
        }

        #selectRadio {
            width: 300px;
            position: relative;
        }


        body #selectRadio .layui-tree-spread>div:first-child .layui-tree-iconArrow::after {
            border-color: #c0c4cc transparent transparent transparent !important;
            top: 5px;
            left: 1px;
        }

        body #selectRadio .layui-tree-set>div:first-child .layui-tree-iconArrow:after {
            border-color: transparent transparent transparent #c0c4cc;
            left: 4px;
            top: 3px;
        }

        body #selectRadio .layui-tree-txt {
            width: 92%;
        }

        #selectRadio .defaultOption>.layui-tree-entry:first-child {
            background: #1E9FFF;
            color: #fff;
        }

        #selectRadio .defaultOption>.layui-tree-entry:first-child span {
            color: #fff;
        }

        body .selectRadioDom .layui-disabled,
        body .selectRadioDom .layui-disabled:hover {
            cursor: not-allowed !important;
        }

        body #selectRadio .layui-tree-entry:hover {
            background: #f3f6fb;
        }

        body #selectRadio .layui-tree-entry {
            padding: 8px;
        }

        body #selectRadio .layui-tree-main {
            width: 100%;
            padding: 0;
        }

        body #selectRadio .layui-tree-entry {
            padding: 0;
            height: auto;
        }

** js**

var message = [{
    title: '江西'
    , id: 1
    , children: [{
        title: '南昌'
        , id: 1000
        , children: [{
            title: '青山湖区'
            , id: 10001
        }, {
            title: '高新区'
            , id: 10002
        }]
    }, {
        title: '九江'
        , id: 1001
    }, {
        title: '赣州'
        , id: 1002
    }]
}, {
    title: '广西'
    , id: 2
    , children: [{
        title: '南宁'
        , id: 2000
    }, {
        title: '桂林'
        , id: 2001
    }]
}, {
    title: '陕西'
    , id: 3
    , children: [{
        title: '西安'
        , id: 3000
    }, {
        title: '延安'
        , id: 3001
    }]
},
{
    title: '山西'
    , id: 4
    , children: [{
        title: '运城'
        , id: 4000
    }, {
        title: '侯马'
        , id: 4001
    }]
},
{
    title: '甘肃'
    , id: 5
    , children: [{
        title: '宁夏'
        , id: 5000
    }, {
        title: 'w(ﾟДﾟ)w'
        , id: 5001
    }]
},
{
    title: '北京'
    , id: 6
    , children: [{
        title: '东城'
        , id: 6000
    }, {
        title: '西城'
        , id: 6001
    },
    {
        title: '南城'
        , id: 6003
    },
    {
        title: '北城'
        , id: 6004
    },
    {
        title: '中城'
        , id: 6005
    },
    {
        title: '昌平'
        , id: 6006
    },
    {
        title: '石景山'
        , id: 6007
    },
    {
        title: '回龙观'
        , id: 6008
    },{
        title: '西二旗'
        , id: 6009
    },
    {
        title: '龙泽'
        , id: 6010
    },
    {
        title: '上地'
        , id: 6011
    },
    {
        title: '古城'
        , id: 6012
    },
    {
        title: '生命科学园'
        , id: 6013
    },
    {
        title: '青河'
        , id: 6014
    },
    {
        title: '葫芦瓜'
        , id: 6015
    },
    {
        title: '葫芦瓜2'
        , id: 6016
    },
    {
        title: '葫芦瓜3'
        , id: 6017
    },
    {
        title: '葫芦瓜4'
        , id: 6018
    },{
        title: '葫芦5'
        , id: 6019
    }
]
}]
layui.tree.render({
    elem: '.selectRadioDom'
    , data: message
    , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
    , showLine: false      
    , showCheckbox: false  // 是否展示多选框
    , accordion: true
    , click: function (obj) {
        console.log(obj);
        // 设置选中值及id
        $('.selectRadioVal').val(obj.data.title)
        $('.selectRadioVal').attr('data-causeId', obj.data.id)
        // 去掉所有被选中状态
        $('.defaultOption').removeClass('defaultOption')
        // 添加被选中状态
        $(obj.elem[0]).addClass('defaultOption')
    }
});


// 点击input选项显示隐藏以及输入框中箭头方向以及滚动条位置
$('body').on('click', '.selectRadioValWrap', function (e) {
    e.stopPropagation()
    var causeId = $(this).find($('input')).attr('data-causeId');
    var defaultDom = $(this).next().find($('div[data-id="' + causeId + '"]'));
    var scrollTopNum = 0;
    var wrapHeight = defaultDom.closest('.selectRadioDom').outerHeight(true);
    $('.selectRadioDom').hide() // 默认所有单选下拉树隐藏
    if ($(this).hasClass('layui-form-selected')) {
        $(this).removeClass('layui-form-selected')
        $(this).next().hide()
    } else {
        $(this).addClass('layui-form-selected')
        $(this).next().show()
        // 设置滚动位置
        if (causeId) {
            function getScrollNum(dom) {
                if (dom.prevAll().length > 0) {
                    for (var i = 0; i < dom.prevAll().length; i++) {
                        scrollTopNum += $(dom.prevAll()[i]).outerHeight(true)
                    }
                }
                if (!dom.parent().hasClass('layui-tree')) {
                    getScrollNum(dom.parent())
                } else {
                    return
                }
            }
            getScrollNum(defaultDom)
            if (scrollTopNum < wrapHeight) {
                scrollTopNum = 0
            } else if (scrollTopNum > (wrapHeight + $('.selectRadioDom .layui-tree-entry').outerHeight(true))) {
                scrollTopNum -= $('.selectRadioDom .layui-tree-entry').outerHeight(true)
            }
            $(this).next()[0].scrollTop = scrollTopNum + 5;
        }
    }
})
// 选中值隐藏选项
$('body').on('click', '.layui-tree-txt', function (e) {
    e.stopPropagation()
    $($(this).closest('.selectRadioDom').prev().find($('.selectRadioValWrap ')).prevObject[0]).removeClass('layui-form-selected')
    $('.selectRadioDom').hide()
})
// 除了点击当前选项 点击其他阻止隐藏下拉框事件
$('body').on('click', '.selectRadioDom', function (e) {
    e.stopPropagation()
})
// 点击外部隐藏选项
$(document).click(function (e) {
    e.stopPropagation()
    $('.selectRadioValWrap').removeClass('layui-form-selected')
    $('.selectRadioDom').hide()
})

多选js里showCheckbox为true，加上id。设置默认值 或者 滚动条位置 思路都一样
多选获取选中值 layui.tree.getChecked('demoId1');
多选这只默认值layui.tree.setChecked('demoId1', [12, 16])