在 Laravel Blade 模板中高效利用 JSON 数据实现级联下拉菜单

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * 显示创建用户表单的视图。
     *
     * @return \Illuminate\View\View
     */
    public function create()
    {
        // 构建 JSON 文件的完整路径
        // base_path() 函数返回项目根目录的绝对路径
        $jsonFilePath = base_path('resources/data/address.json');

        // 检查文件是否存在以避免错误
        if (!file_exists($jsonFilePath)) {
            // 根据实际情况处理文件不存在的错误，例如抛出异常或返回错误信息
            return back()->withErrors('JSON 数据文件不存在！');
        }

        // 读取 JSON 文件的内容
        $jsonString = file_get_contents($jsonFilePath);

        // 将 JSON 字符串解码为 PHP 数组
        // 第二个参数 true 表示将 JSON 对象解码为关联数组，而非对象
        $details = json_decode($jsonString, true);

        // 检查解码是否成功
        if (json_last_error() !== JSON_ERROR_NONE) {
            // 处理 JSON 解析错误
            return back()->withErrors('JSON 数据解析失败：' . json_last_error_msg());
        }

        // 将解析后的数据传递给视图
        return view('users.create')->with('details', $details);
    }
}

[
 {
   "Region": "Naypyitaw Union Territory",
   "Town ": "Za Bu Thi Ri Township",
   "Quarter ": "Zay Ya Theik Di Quarter",
   "Postal Code": 1501001
},
 {
   "Region": "Naypyitaw Union Territory",
   "Town ": "Za Bu Thi Ri Township",
   "Quarter ": "Pyin Nyar Theik Di Quarter",
   "Postal Code": 1501002
}
]

<label for="region">区域:</label>
<select name="region" id="region" class="form-control">
    <option value="">请选择区域</option>
    {{-- 使用 array_unique 确保区域不重复 --}}
    @foreach($details->unique('Region') as $detail)
       <option value="{{ $detail['Region'] }}">{{ $detail['Region'] }}</option>
    @endforeach
</select>

<!-- users/create.blade.php 的某个位置 -->
<script>
    // 将 PHP 数组转换为 JSON 字符串，并赋值给 JavaScript 变量
    const allDetails = @json($details); 
    // 或者使用 JSON.parse('{!! json_encode($details) !!}'); 如果需要更严格的转义
</script>

<label for="region">区域:</label>
<select name="region" id="region" class="form-control">
    <option value="">请选择区域</option>
    @foreach(collect($details)->unique('Region') as $detail)
       <option value="{{ $detail['Region'] }}">{{ $detail['Region'] }}</option>
    @endforeach
</select>

<label for="town" class="mt-3">乡镇:</label>
<select name="town" id="town" class="form-control" disabled>
    <option value="">请选择乡镇</option>
</select>

<label for="quarter" class="mt-3">街区:</label>
<select name="quarter" id="quarter" class="form-control" disabled>
    <option value="">请选择街区</option>
</select>

<label for="postal_code" class="mt-3">邮政编码:</label>
<input type="text" name="postal_code" id="postal_code" class="form-control" readonly>

<script>
    // 确保 DOM 加载完成后执行
    document.addEventListener('DOMContentLoaded', function () {
        const regionSelect = document.getElementById('region');
        const townSelect = document.getElementById('town');
        const quarterSelect = document.getElementById('quarter');
        const postalCodeInput = document.getElementById('postal_code');

        // 初始化时清空并禁用乡镇和街区下拉菜单
        function resetTownAndQuarter() {
            townSelect.innerHTML = '<option value="">请选择乡镇</option>';
            townSelect.disabled = true;
            quarterSelect.innerHTML = '<option value="">请选择街区</option>';
            quarterSelect.disabled = true;
            postalCodeInput.value = ''; // 清空邮政编码
        }

        resetTownAndQuarter(); // 页面加载时执行一次

        regionSelect.addEventListener('change', function () {
            const selectedRegion = this.value;
            resetTownAndQuarter(); // 每次区域变化时重置

            if (selectedRegion) {
                // 过滤出与所选区域匹配的乡镇数据
                const filteredTowns = allDetails.filter(item => item['Region'] === selectedRegion);

                // 获取不重复的乡镇列表
                const uniqueTowns = [...new Set(filteredTowns.map(item => item['Town ']))]; // 注意 'Town ' 有空格

                // 填充乡镇下拉菜单
                uniqueTowns.forEach(town => {
                    const option = document.createElement('option');
                    option.value = town;
                    option.textContent = town;
                    townSelect.appendChild(option);
                });
                townSelect.disabled = false; // 启用乡镇下拉菜单
            }
        });

        townSelect.addEventListener('change', function () {
            const selectedRegion = regionSelect.value;
            const selectedTown = this.value;
            quarterSelect.innerHTML = '<option value="">请选择街区</option>'; // 重置街区
            quarterSelect.disabled = true;
            postalCodeInput.value = ''; // 清空邮政编码

            if (selectedRegion && selectedTown) {
                // 过滤出与所选区域和乡镇匹配的街区数据
                const filteredQuarters = allDetails.filter(item => 
                    item['Region'] === selectedRegion && item['Town '] === selectedTown
                );

                // 获取不重复的街区列表
                const uniqueQuarters = [...new Set(filteredQuarters.map(item => item['Quarter ']))]; // 注意 'Quarter ' 有空格

                // 填充街区下拉菜单
                uniqueQuarters.forEach(quarter => {
                    const option = document.createElement('option');
                    option.value = quarter;
                    option.textContent = quarter;
                    quarterSelect.appendChild(option);
                });
                quarterSelect.disabled = false; // 启用街区下拉菜单
            }
        });

        quarterSelect.addEventListener('change', function () {
            const selectedRegion = regionSelect.value;
            const selectedTown = townSelect.value;
            const selectedQuarter = this.value;
            postalCodeInput.value = ''; // 清空邮政编码

            if (selectedRegion && selectedTown && selectedQuarter) {
                // 找到对应的邮政编码
                const matchedDetail = allDetails.find(item => 
                    item['Region'] === selectedRegion && 
                    item['Town '] === selectedTown && 
                    item['Quarter '] === selectedQuarter
                );

                if (matchedDetail) {
                    postalCodeInput.value = matchedDetail['Postal Code'];
                }
            }
        });
    });
</script>