如何在Laravel的blade.php模板中使用JSON文件实现联动下拉菜单

基础错误修正 #

你调用json_decode时传入了第二个参数true，所以返回的$details是二维数组，不能用->语法访问属性，需要使用数组语法。另外原JSON数据的Town 、Quarter 键名末尾带有空格，取值时要严格对应避免报错。

完整实现代码 #

Blade模板结构 #

<!-- 把PHP地址数据转为JS可读取的变量 -->
<script>
const addressData = @json($details);
</script>

<!-- 四级下拉表单 -->
<div>
    <label>Region</label>
    <select name="region" id="region">
        <option value="">请选择Region</option>
        @php
            // 提取所有不重复的Region渲染首选项
            $uniqueRegions = array_unique(array_column($details, 'Region'));
        @endphp
        @foreach($uniqueRegions as $region)
            <option value="{{ $region }}">{{ $region }}</option>
        @endforeach
    </select>
</div>
<div>
    <label>Town</label>
    <select name="town" id="town" disabled>
        <option value="">请选择Town</option>
    </select>
</div>
<div>
    <label>Quarter</label>
    <select name="quarter" id="quarter" disabled>
        <option value="">请选择Quarter</option>
    </select>
</div>
<div>
    <label>Postal Code</label>
    <select name="postal_code" id="postal_code" disabled>
        <option value="">请选择邮编</option>
    </select>
</div>

联动逻辑JS代码 #

const regionSelect = document.getElementById('region');
const townSelect = document.getElementById('town');
const quarterSelect = document.getElementById('quarter');
const postalSelect = document.getElementById('postal_code');

// 监听Region选择变化
regionSelect.addEventListener('change', function() {
    const selectedRegion = this.value;
    // 重置所有下级下拉状态
    townSelect.innerHTML = '<option value="">请选择Town</option>';
    quarterSelect.innerHTML = '<option value="">请选择Quarter</option>';
    postalSelect.innerHTML = '<option value="">请选择邮编</option>';
    quarterSelect.disabled = true;
    postalSelect.disabled = true;

    if (!selectedRegion) {
        townSelect.disabled = true;
        return;
    }

    // 过滤当前Region下所有不重复的Town
    const townList = [...new Set(addressData.filter(item => item.Region === selectedRegion).map(item => item['Town ']))];
    townList.forEach(town => {
        const option = document.createElement('option');
        option.value = town;
        option.textContent = town;
        townSelect.appendChild(option);
    });
    townSelect.disabled = false;
});

// 监听Town选择变化
townSelect.addEventListener('change', function() {
    const selectedRegion = regionSelect.value;
    const selectedTown = this.value;
    // 重置下级下拉状态
    quarterSelect.innerHTML = '<option value="">请选择Quarter</option>';
    postalSelect.innerHTML = '<option value="">请选择邮编</option>';
    postalSelect.disabled = true;

    if (!selectedTown) {
        quarterSelect.disabled = true;
        return;
    }

    // 过滤对应Region和Town下所有不重复的Quarter
    const quarterList = [...new Set(addressData.filter(item => item.Region === selectedRegion && item['Town '] === selectedTown).map(item => item['Quarter ']))];
    quarterList.forEach(quarter => {
        const option = document.createElement('option');
        option.value = quarter;
        option.textContent = quarter;
        quarterSelect.appendChild(option);
    });
    quarterSelect.disabled = false;
});

// 监听Quarter选择变化
quarterSelect.addEventListener('change', function() {
    const selectedRegion = regionSelect.value;
    const selectedTown = townSelect.value;
    const selectedQuarter = this.value;
    postalSelect.innerHTML = '<option value="">请选择邮编</option>';

    if (!selectedQuarter) {
        postalSelect.disabled = true;
        return;
    }

    // 匹配对应邮编
    const postalList = addressData.filter(item => item.Region === selectedRegion && item['Town '] === selectedTown && item['Quarter '] === selectedQuarter).map(item => item['Postal Code']);
    postalList.forEach(code => {
        const option = document.createElement('option');
        option.value = code;
        option.textContent = code;
        postalSelect.appendChild(option);
    });
    postalSelect.disabled = false;
});

可选优化 #

如果Quarter和Postal Code是一一对应关系，可以把Postal Code改成只读输入框，选中Quarter后自动填充值，减少用户操作步骤。

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