Laravel中如何解析JSON数组并在Blade渲染分类下拉选择框

没问题，我来帮你搞定这个需求！我们完全可以通过PHP在Laravel里处理这个JSON数组，然后在Blade模板中渲染出对应的下拉选择框，全程不需要依赖jQuery。

步骤1：在控制器中预处理JSON数据 #

首先我们把原始JSON解析成数组，再将每个选项（Size、Color）和对应的取值、价格关联起来，整理成更易在视图中使用的结构，这样后续渲染会更清晰。

// 你的原始JSON数据（可以从数据库、接口或其他来源获取）
$rawJson = '{ "option":["Size","Color"], "values":["L|M|S","Red|Green|Black"], "price":["9000|8000|6000","9000|8000|6000"] }';

// 解析JSON为关联数组
$productOptions = json_decode($rawJson, true);

// 整理成结构化数组：每个元素包含选项名称、对应的取值和价格
$processedOptions = [];
foreach ($productOptions['option'] as $index => $optionName) {
    // 把竖线分隔的字符串拆分成单独的数组元素
    $valueList = explode('|', $productOptions['values'][$index]);
    $priceList = explode('|', $productOptions['price'][$index]);
    
    // 关联每个取值和对应的价格
    $options = [];
    foreach ($valueList as $valIndex => $value) {
        $options[] = [
            'value' => $value,
            'price' => $priceList[$valIndex] ?? '未知' // 兼容价格缺失的情况
        ];
    }
    
    $processedOptions[] = [
        'name' => $optionName,
        'options' => $options
    ];
}

// 将处理好的数据传递到Blade视图
return view('your-view-name', compact('processedOptions'));

步骤2：在Blade模板中渲染下拉选择框 #

现在可以在视图里循环处理整理好的数组，为每个选项生成对应的下拉框：

<div class="product-option-group">
    @foreach($processedOptions as $option)
        <div class="mb-3">
            <label for="{{ strtolower($option['name']) }}" class="form-label">
                {{ $option['name'] }}
            </label>
            <select 
                name="{{ strtolower($option['name']) }}" 
                id="{{ strtolower($option['name']) }}"
                class="form-select"
            >
                <option value="">请选择{{ $option['name'] }}</option>
                @foreach($option['options'] as $item)
                    <option value="{{ $item['value'] }}" data-price="{{ $item['price'] }}">
                        {{ $item['value'] }} - ￥{{ $item['price'] }}
                    </option>
                @endforeach
            </select>
        </div>
    @endforeach
</div>

额外说明 #

• 用explode('|', $string)拆分竖线分隔的字符串，能轻松拿到每个单独的选项值和对应价格。
• 通过索引循环关联取值与价格，确保每个选项值匹配正确的价格。
• 模板中的data-price属性可以方便后续用原生JS处理价格相关逻辑（比如实时计算总价），但完全不需要jQuery。
• 如果不需要在选项中显示价格，只保留{{ $item['value'] }}即可。

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