Laravel 6:来自数据库的动态选择框/下拉列表填充

Question

如标题中所述，我想根据另一个HTML选择框的选择动态更改HTML选择框的可用选项，仅在可能的情况下使用PHP。

到目前为止，我已经设法将每个表中的数据传递到视图中，但我不知道如何在此上下文中使用主键和辅助键，并且没有将逻辑写入视图文件，尊重安全预防措施。

我有什么：

控制器：

...
use IlluminateSupportFacadesDB;
...
public function create()
{
$sport_categories = DB::table('sport_categories')->get();
$sports = DB::table('sports')->get();
return view('events.create', 
[
'sport_categories' => $sport_categories, 
'sports' => $sports
]
);
}

视图：

<div id="event-sport-category">
<span>Sport Category:</span>
<select name="sport-category">
<option value="default" selected="selected" disabled hidden>Select Sport Category</option>
@foreach($sport_categories as $sport_category)
<option value="{{ $sport_category->id }}" title="{{ $sport_category->desc }}">{{ $sport_category->name }}</option>
@endforeach
</select>
</div>

和

<div id="event-sport">
<span>Sport:</span>
<select name="sport">
<option value="default" selected="selected" disabled hidden>Select Sport</option>
@foreach($sports as $sport)
<option value="{{ $sport->id }}" title="{{ $sport->desc }}">{{ $sport->name }}</option>
@endforeach
</select>
</div>

数据库表包括：

sport_categories (id, name, desc)

和

sports (id, sport_category_id, name, desc)

Answer 1

你需要使用某种Javascript才能像你想要的那样工作。正如@Clint建议的那样，由于 PHP 是服务器端的，因此您将无法在运行时更改 UI。

好消息是，你可以保留你已经做过的一切。根据您对 Javascript 的舒适度，它可以像根据所选内容显示/隐藏不同的 html 输入一样简单。

使用 jQuery，你可以做这样的事情：

<div id="event-sport-category">
<span>Sport Category:</span>
<select name="sport-category" id="sportCategory">
<option value="default" selected="selected" disabled hidden>Select Sport Category</option>
@foreach($sport_categories as $sport_category)
<option value="{{ $sport_category->id }}" title="{{ $sport_category->desc }}">{{ $sport_category->name }}</option>
@endforeach
</select>
</div>
<div id="event-sport-one">
<span>Sport:</span>
<select name="sport" id="sport">
<option value="default" selected="selected" disabled hidden>Select Sport</option>
@foreach($sports as $sport)
<option value="{{ $sport->id }}" title="{{ $sport->desc }}">{{ $sport->name }}</option>
@endforeach
</select>
</div>
<div id="event-sport-two">
<span>Sport:</span>
<select name="sport" id="sportTwo">
<option value="default" selected="selected" disabled hidden>Select Sport</option>
@foreach($sportsTwo as $sportTwo)
<option value="{{ $sportTwo->id }}" title="{{ $sportTwo->desc }}">{{ $sportTwo->name }}</option>
@endforeach
</select>
</div>

jQuery

$(document).ready(function(){
$("#sportCategory").change(function(){
var category = $(this).children("option:selected").val();
console.log('selected category: ', category);
if (category == 'foo') {
// show sports related to foo
// hide & reset everything else
...
$('#event-sport-two').show();
$('#event-sport-one').hide();
}
});
});

.CSS

#event-sport-two {
display: none;
}

执行类似操作将在页面加载时呈现/隐藏所有可用选项。您可以使用CSS隐藏实际的表单元素，然后使用jQuery可以根据需要显示/隐藏内容。如果您有很多事情要管理，这可能会变得混乱。

另一种选择是让你的表单成为 Vue 组件。然后，您可以根据选择的内容使用v-show。

最后一种选择(使用任一方式(是侦听要更改的输入 - 然后发出ajax请求以获取数据并根据服务器的响应显示输入。

Vue 会给你一个更干净的代码。您可以获取数据，只显示所需的内容，而不必担心所有显示/隐藏业务。:)

希望对您有所帮助！