select下拉 + 展开树并选中节点 + 跳转

前台

<?php
use yii\helpers\Url;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
?>
<div class="layui-card" style="height: 700px;">
    <div class="flex-sb mb-5" style="padding-top:30px ;">
        <div class="layui-inline" >
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline" id="username"></div>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="usermenu"></div>
    </div>
</div>

<input type="hidden"  id="tree_id"  value="">





<?php $this->beginBlock('user') ?>
var get_ajax_menu = "<?= Url::to(['user-auth/get-ajax-menu'])?>";
var ajax_user_list = "<?= Url::to(['user-auth/get-user-list'])?>";
var content_url = "<?= Url::to(['user-auth/content'])?>";

<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks['user'], \yii\web\View::POS_END); ?>

<?php
\app\assets\AppAsset::addScript($this, '@web/js/gqinv/userauth.js?' . time());
?>

js

layui.use(['form','tree','table','selectInput'],function(){
    let $ = layui.jquery,
        form = layui.form,
        tree = layui.tree,
        table = layui.table,
        selectInput = layui.selectInput;;

    var url = get_ajax_menu;
    $.ajax({
        type: 'post',
        url: url,
        success: function (data) {
            tree.render({
                elem:'#usermenu',
                data:data.data,
                showLine: false , //是否开启连接线
                click: function(obj){
                    if(obj.data.href){
                        parent.frames.frames['goods'].location.replace(obj.data.href);
                        //当前点击的树节点
                        var currTreeId = obj.data.id;
                        //上一次点击的树节点id
                        var beforeTreeId =  $('#tree_id').val();
                        //对比前后id，不相同时移除上一个节点的样式，并设置当前点击的节点样式
                        if (currTreeId !== beforeTreeId){
                            //最底层节点增加选中状态
                            $('div [data-id="'+currTreeId+'"] div').css('background-color','#87eaa3');
                            $('div [data-id="'+beforeTreeId+'"] div').css('background-color','');
                            //其他节点需要增加选中状态时
                            //$('div [data-id="'+currTreeId+'"] div').eq(1).last().css('background-color','#87eaa3');
                            //$('div [data-id="'+beforeTreeId+'"] div').eq(1).last().css('background-color','');
                            $('#tree_id').val(obj.data.id);
                        }
                    }



            }

            })
        }

    });

    // 全量参数版本
    var ins = selectInput.render({
        // 容器id，必传参数
        elem: '#username',
        name: 'test', // 渲染的input的name值
        layFilter: 'test', //同layui form参数lay-filter
        layVerify: 'required', //同layui form参数lay-verify
        layVerType: 'tips', // 同layui form参数lay-verType
        layReqText: '请填写文本', //同layui form参数lay-ReqText
        initValue: '', // 渲染初始化默认值
        hasSelectIcon: true,
        placeholder: '', // 渲染的inputplaceholder值
        remoteSearch: true, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
        remoteMethod: function (value, cb) { // 远程搜索的回调函数
            // value 是input实施输入的value值
            // cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数
            //这里如果val为空, 则不触发搜索
            if (!value) {
                return cb([]);
            }
            $('.mybody').html('');
            $("input[name= 'address']").val('');
            goodsk =0;
            // alert(22);
            //这里的$.ajax去请求后台拿回数据
            $.ajax({
                method: 'get',
                url: ajax_user_list,
                data: {
                    v: value,
                },
                success: function (data) {
                    //alert(111);
                    // 此处最好直接返回取你返回的 data属性，如：data.data，这样不限制你后端返回的数据对象格式，如果整体传参，必须满足：{"code":0,"msg":"success","data":[]}
                    return cb(data.data)
                }
            })
        }
    });
    // 获取选中的value值
    var selectValue = ins.getValue();
    // 监听select 选择事件
    ins.on('itemSelect(username)', function (obj) {
        var id = $(obj.elem).attr('lay-id');
        //已经选中
        var beforeTreeId =  $('#tree_id').val();
        //对比前后id，不相同时移除上一个节点的样式，并设置当前点击的节点样式
        if (id !== beforeTreeId) {
            $('div [data-id="'+beforeTreeId+'"] div').css('background-color','');
        }
        $('div [data-id="' + id + '"] div').css('background-color', '#87eaa3');
        var url = content_url + '?id=' + id;
        obj_spread($('div [data-id="'+id+'"] div'));
        //选中节点
        $('#tree_id').val(id);
        parent.frames.frames['goods'].location.replace(url);
    });



})

//选中下拉展开数
function obj_spread(obj){
    var parentobj = $(obj).parents('.layui-tree-pack');
        parentobj.each(function(){
            $(this).css('display','block');
        })
}