HTML代码

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">关系</label>
        <div class="layui-input-inline">
            <!-- 点击触发选择器 -->
            <input type="hidden" name="relation_id" id="relation_id">
            <input type="text" data-relation-id=""  name="relation" lay-verify="relation" id="relation" placeholder="选择您与患者的关系" readonly class="layui-input" style="background-color: #fff; cursor: pointer;">
        </div>
    </div>
</form>

CSS样式

<link rel="stylesheet" href="/static/wechat/css/weui.css">

weui.zip

JS代码

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.17/weui.min.js"></script>

<script>
    let cachedRelationGroups = null;

    document.getElementById('relation').addEventListener('click', function () {
        const $input = this;

        if (cachedRelationGroups) {
            showLinkagePicker(cachedRelationGroups, $input);
            return;
        }

        const loading = weui.loading('加载中...');
        fetch('/yejuzhi/Api/getRelationList?model=98&group=调理类型')
            .then(res => res.json())
            .then(json => {
                loading.hide();
                if (json.code === 100 && Array.isArray(json.data)) {
                    // 处理成两级结构
                    const groups = json.data
                        .filter(group => group.status === 1)
                        .sort((a, b) => a.sort - b.sort)
                        .map(group => {
                            const items = (group.items || [])
                                .filter(item => item.status === 1)
                                .sort((a, b) => a.sort - b.sort)
                                .map(item => ({ label: item.name, value: item.id }));

                            return {
                                label: group.group,  // 一级名称
                                value: group.id || group.group, // 一级值（可用 id 或 group 名）
                                children: items      // 二级选项
                            };
                        })
                        .filter(group => group.children.length > 0); // 确保有子项

                    if (groups.length === 0) {
                        return weui.alert('无可选关系');
                    }

                    cachedRelationGroups = groups;
                    showLinkagePicker(cachedRelationGroups, $input);
                } else {
                    weui.alert(json.msg || '加载失败');
                }
            })
            .catch(() => {
                loading.hide();
                weui.alert('网络错误');
            });
    });

    // 显示两级联动选择器
    function showLinkagePicker(data, input) {
        weui.picker(data, {
            type: 'linkage',
            depth: 2,
            title: '选择关系',
            defaultValue: data[0].children.length > 0 ? [data[0].value, data[0].children[0].value] : [],
            onConfirm: function (result) {
                // result 示例: [{label: "家庭关系", value: 1}, {label: "父亲", value: 101}]
                input.value = result[1].label; // 显示选中的具体关系名称
                document.getElementById('relation_id').value = result[1].value; // 存储 relation_id
            }
        });
    }
</script>

后端代码

public function getTypeList(){
    $model = Request::param('model');
    $pid = Request::param('pid');
    $group = Request::param('group');
    if($pid){
        $parentId = $pid;
    }else{
        $parentId = 0;
    }
    $list = $this->getTypeTree($model,$parentId,$group);
    return json(['code' => 100, 'data' => $list]);
}
public function getTypeTree($model,$pid,$group)
{
    $where = array();
    $where[] = ['status','=',1];
    $where[] = ['pid','=',$pid];
    $data = $this->DbSy->SelectList($model,'sort asc',$where);
    $result = [];
    foreach ($data as $k => $v) {
        $item = array();
        if ($v['pid'] == $pid) {
            $item['group'] = $v['name'];
            $item['id'] = $v['id'];
            $item['sort'] = $v['sort'];
            $item['name'] = $v['name'];
            $item['status'] = $v['status'];
            $item['items'] = $this->getTypeTree($model,$v['id'],$group);
            $result[] = $item;
        }
    }
    return \think\Collection::make($result)->toArray();
}
public function getRelationList()
{
    $list = [
        [
            'group'  => '家庭关系',
            'id'     => 1,
            'sort'   => 1,
            'status' => 1,
            'items'  => [
                ['name' => '父亲', 'id' => 1, 'sort' => 1, 'status' => 1],
                ['name' => '母亲', 'id' => 2, 'sort' => 2, 'status' => 1],
                ['name' => '配偶', 'id' => 3, 'sort' => 3, 'status' => 1],
            ]
        ],
        [
            'group'  => '医疗相关',
            'id'     => 2,
            'sort'   => 2,
            'status' => 1,
            'items'  => [
                ['name' => '主治医生', 'id' => 11, 'sort' => 1, 'status' => 1],
                ['name' => '责任护士', 'id' => 12, 'sort' => 2, 'status' => 1],
            ]
        ]
    ];

    return json(['code' => 100, 'data' => $list]);
}