Laravel - 如何根据选择的单选按钮有条件地显示输入选择框？答案

【问题标题】：Laravel - How can I conditionally display the input select box based on the radio button selected?Laravel - 如何根据选择的单选按钮有条件地显示输入选择框？
【发布时间】：2021-02-01 04:23:54
【问题描述】：

我目前正在使用 Livewire 使用 Laravel 8。表单中有两个输入选择框，我如何有条件地显示基于选中的单选按钮的选择框。我想在没有jQuery的情况下实现结果，请帮助我。

这就是我想要实现的目标：

需要在这两者之间切换：

<div class="mb-2">
    <label for="category_id" class="block">Category ID</label>
    <select wire:model="category_id" name="category_id" id="category_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-blue-900">
        <option>Select Option</option>
        @foreach($categories as $category)
        <option value="{{ $category->id }}">{{ $category->category_name }}</option>
        @endforeach
        @error('category_id') <h1 class="text-red-500">{{$message}}</h1>@enderror
    </select>
</div>


<div class="mb-2">
    <label for="sub_category_id" class="block">Sub-Category ID</label>
    <select wire:model="sub_category_id" name="sub_category_id" id="sub_category_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-blue-900">
        <option>Select Option</option>
        @foreach($subcategories as $subcategory)
        <option value="{{ $subcategory->id }}">{{ $subcategory->sub_category_name }}</option>
        @endforeach
        @error('sub_category_id') <h1 class="text-red-500">{{$message}}</h1>@enderror
    </select>
</div>

【问题讨论】：

我认为没有 JS/jQuery 是不可能的。
@WarrenClarin 我猜 livewire 不需要 JavaScript。可能有一些事情可以实现上述结果。
为了让我们给出准确的答案，您需要分享完整的代码。但是，只需使用 @if 并检查复选框的属性是否已设置。
@Qirel 感谢伙伴伸出援手，我使用 alpine.js 实现了当前的解决方案，它就像顺风一样简单，只有两个属性，我就完成了。无论如何，谢谢。
@ToxifiedHashkey 请注意分享您的解决方案，否则这仍然是一个悬而未决的问题

标签： php laravel laravel-8 laravel-livewire

【解决方案1】：

我知道这已经死了一段时间，所以我会想办法回答。

假设您的代码在上面，首先我们需要跟踪一些东西以设置此状态。很棒的是我们可以使用来自 livewire 的变量。

在组件中定义一个变量 public $category_type = "";

现在将它绑定到单选按钮

<input wire:model="category_type" type="radio" value="category">
<input wire:model="category_type" type="radio" value="sub_category">

所以组件中的这个项目会随着变化而更新，所以我们可以使用刀片指令来渲染所需的输入集

@if($category_type == "category")
<div class="mb-2">
    <label for="category_id" class="block">Category ID</label>
    <select wire:model="category_id" name="category_id" id="category_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-blue-900">
        <option>Select Option</option>
        @foreach($categories as $category)
        <option value="{{ $category->id }}">{{ $category->category_name }}</option>
        @endforeach
        @error('category_id') <h1 class="text-red-500">{{$message}}</h1>@enderror
    </select>
</div>
@elseif($category_type == "sub_category")
<div class="mb-2">
    <label for="sub_category_id" class="block">Sub-Category ID</label>
    <select wire:model="sub_category_id" name="sub_category_id" id="sub_category_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-blue-900">
        <option>Select Option</option>
        @foreach($subcategories as $subcategory)
        <option value="{{ $subcategory->id }}">{{ $subcategory->sub_category_name }}</option>
        @endforeach
        @error('sub_category_id') <h1 class="text-red-500">{{$message}}</h1>@enderror
    </select>
</div>
@endif

当您循环选择单选按钮时，正确的表单元素会出现/消失。要为这个过渡设置动画，您可能会使用一些 css 类并添加删除它们。

【讨论】：