Laravel中如何实现带复选框的动态下拉选择框？

嘿，作为Laravel新手，开发带复选框的动态下拉选择框其实没你想的那么难～我结合你提供的Materialize风格HTML，一步步帮你搞定：

假设你有一个properties表存储属性（字段比如id、name），先在控制器里把数据传给视图：

// 比如在ProductController的search方法中
use App\Models\Property;
use Illuminate\Http\Request;

public function search(Request $request)
{
    // 获取所有属性数据（也可以按需筛选）
    $properties = Property::all();
    
    // 处理表单提交的选中值（可选，用于搜索产品）
    $selectedProps = $request->input('properties', []);
    $products = [];
    if (!empty($selectedProps)) {
        // 假设Product和Property是多对多关联，根据选中属性筛选产品
        $products = \App\Models\Product::whereHas('properties', function($query) use ($selectedProps) {
            $query->whereIn('id', $selectedProps);
        })->get();
    }
    
    return view('products.search', compact('properties', 'products', 'selectedProps'));
}

别忘了给Product和Property模型设置多对多关联：

// Product模型
public function properties()
{
    return $this->belongsToMany(Property::class);
}

// Property模型
public function products()
{
    return $this->belongsToMany(Product::class);
}

因为你的代码用了Materialize框架，我给你两种方案：

方案1：用Materialize原生多选组件（简单易上手） #

直接改造你原来的select，加上动态渲染和组件初始化：

<form action="{{ route('products.search') }}" method="GET">
    <div class="container w60">
        <div class="row pad_y_20">
            <div class="col s12">
                <h3 class="c_black center-align bold">Search for Our Products</h3>
            </div>
            <div class="input-field my_arrow col s12 m10 push-m1 l3">
                <!-- 动态渲染属性选项 -->
                <select name="properties[]" multiple>
                    <option value="" disabled>Select Properties</option>
                    @foreach($properties as $prop)
                        <option value="{{ $prop->id }}" 
                            {{ in_array($prop->id, old('properties', $selectedProps)) ? 'selected' : '' }}>
                            {{ $prop->name }}
                        </option>
                    @endforeach
                </select>
                <label>Choose Properties</label>
            </div>
            <div class="col s12 center-align">
                <button type="submit" class="btn waves-effect waves-light">Search Products</button>
            </div>
        </div>
    </div>
</form>

<!-- 初始化Materialize的select组件 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    M.FormSelect.init(elems);
});
</script>

这个方案会把原生多选select美化成Materialize风格的下拉，点击后可多选，选中的选项会显示在输入框内。

方案2：自定义带复选框的下拉菜单（更直观） #

如果你想要下拉里明确显示复选框，可以用Materialize的Dropdown组件自定义：

<form action="{{ route('products.search') }}" method="GET">
    <div class="container w60">
        <div class="row pad_y_20">
            <div class="col s12">
                <h3 class="c_black center-align bold">Search for Our Products</h3>
            </div>
            <div class="col s12 m10 push-m1 l3">
                <!-- 下拉触发按钮 -->
                <a class="dropdown-trigger btn w-full" href="#" data-target="property-dropdown">
                    {{ !empty($selectedProps) ? implode(', ', $properties->whereIn('id', $selectedProps)->pluck('name')->toArray()) : 'Select Properties' }}
                </a>
                <!-- 带复选框的下拉菜单 -->
                <ul id="property-dropdown" class="dropdown-content">
                    @foreach($properties as $prop)
                        <li>
                            <label>
                                <input type="checkbox" name="properties[]" value="{{ $prop->id }}" 
                                    {{ in_array($prop->id, old('properties', $selectedProps)) ? 'checked' : '' }} />
                                <span>{{ $prop->name }}</span>
                            </label>
                        </li>
                    @endforeach
                </ul>
            </div>
            <div class="col s12 center-align">
                <button type="submit" class="btn waves-effect waves-light">Search Products</button>
            </div>
        </div>
    </div>
</form>

<!-- 初始化Dropdown组件 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(elems, {
        coverTrigger: false, // 防止菜单被按钮遮挡
        alignment: 'left'
    });
});
</script>

提交后，控制器里的$selectedProps会拿到所有选中的属性ID，你可以用它来筛选产品，或者做其他业务逻辑。同时用old('properties')来保持表单回显状态，比如验证失败时不会丢失用户选中的选项。

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