如何将层级嵌套数组转换为独立的select输入框？

问题描述 #

我有一个多层级嵌套数组，每一层对应一个层级结构，需要为每个层级生成独立的<select>输入框，每个嵌套层级都包含父ID字段。

示例数据：

$data = [
  "group1" => [
        "group_id" => 0,
        "subgroup1" => [
            "subgroup_id" => 0,
            "unit1" => [
                "unit_id" => 0,
                "subunit1" => [
                    "subunit_id" => 0
                ],    
            ],
            "unit2" => [
                "unit_id" => 1,
                "subunit2" => [
                    "subunit_id" => 1
                ],        
        ],     
    ],
    
    "subgroup2" => [
        "subgroup_id" => 1,
        "unit3" =>  [
            "unit_id" => 2,
            "subunit3" =>  [
                "subunit_id" => 2
            ],        
        ],
        "unit4" => [
            "unit_id" => 3,
            "subunit4" => [     
                "subunit_id" => 3
        ],       
      ],      
    ],    
  ]

期望生成的HTML效果：

<select>
    <option>group1</option>
    <option>group2</option>
</select>

<select>
    <option class="group_id_0">subgroup1</option> <!-- group_id 对应父级分组ID -->
    <option class="group_id_1">subgroup2</option>
</select>

尝试过嵌套foreach循环，但因每个select是独立的，无法实现需求。

解决方案 #

核心思路是先将每个层级的选项数据（名称、父ID）单独提取并按层级存储，之后再逐个生成独立的select框。以下是具体PHP实现：

<?php
// 示例数据
$data = [
  "group1" => [
        "group_id" => 0,
        "subgroup1" => [
            "subgroup_id" => 0,
            "unit1" => [
                "unit_id" => 0,
                "subunit1" => [
                    "subunit_id" => 0
                ],    
            ],
            "unit2" => [
                "unit_id" => 1,
                "subunit2" => [
                    "subunit_id" => 1
                ],        
        ],     
    ],
    
    "subgroup2" => [
        "subgroup_id" => 1,
        "unit3" =>  [
            "unit_id" => 2,
            "subunit3" =>  [
                "subunit_id" => 2
            ],        
        ],
        "unit4" => [
            "unit_id" => 3,
            "subunit4" => [     
                "subunit_id" => 3
        ],       
      ],      
    ],    
  ];

// 存储各层级选项数据
$levels = [];

// 提取第一层：分组
$levels[0] = [];
foreach ($data as $groupName => $groupData) {
    $levels[0][] = [
        'name' => $groupName,
        'parent_id' => $groupData['group_id']
    ];
}

// 提取第二层：子分组
$levels[1] = [];
foreach ($data as $groupData) {
    foreach ($groupData as $key => $value) {
        if ($key === 'group_id') continue;
        $levels[1][] = [
            'name' => $key,
            'parent_id' => $groupData['group_id']
        ];
    }
}

// 提取第三层：单元
$levels[2] = [];
foreach ($data as $groupData) {
    foreach ($groupData as $subgroupKey => $subgroupData) {
        if ($subgroupKey === 'group_id') continue;
        foreach ($subgroupData as $key => $value) {
            if ($key === 'subgroup_id') continue;
            $levels[2][] = [
                'name' => $key,
                'parent_id' => $subgroupData['subgroup_id']
            ];
        }
    }
}

// 提取第四层：子单元
$levels[3] = [];
foreach ($data as $groupData) {
    foreach ($groupData as $subgroupKey => $subgroupData) {
        if ($subgroupKey === 'group_id') continue;
        foreach ($subgroupData as $unitKey => $unitData) {
            if ($unitKey === 'subgroup_id') continue;
            foreach ($unitData as $key => $value) {
                if ($key === 'unit_id') continue;
                $levels[3][] = [
                    'name' => $key,
                    'parent_id' => $unitData['unit_id']
                ];
            }
        }
    }
}

// 生成每个层级的select框
foreach ($levels as $levelIndex => $options) {
    echo "<select>\n";
    foreach ($options as $opt) {
        $parentClass = '';
        // 根据层级设置对应父ID类名
        match($levelIndex) {
            1 => $parentClass = "group_id_{$opt['parent_id']}",
            2 => $parentClass = "subgroup_id_{$opt['parent_id']}",
            3 => $parentClass = "unit_id_{$opt['parent_id']}",
        };
        $classAttr = $parentClass ? " class=\"{$parentClass}\"" : '';
        echo "    <option{$classAttr}>{$opt['name']}</option>\n";
    }
    echo "</select>\n\n";
}
?>

代码说明 #

• 先将每个层级的选项数据提取到$levels数组，每个索引对应一个层级的所有选项（包含名称和父ID）。
• 遍历$levels数组，为每个层级生成独立的<select>标签，并根据层级为<option>添加对应的父ID类名。
• 若层级更多或数据结构调整，只需扩展对应层级的提取逻辑即可。

内容的提问来源于stack exchange，提问作者pileup