Laravel 6: Dynamic selectbox/droplist population from the database - php

Question

As stated in the title, I want to dynamically change the available options of an HTML select box, based on the selection of another HTML select box, using PHP only if possible.
So far, I have managed to pass the data from each table into the view but I do not know how to use the primary and secondary keys in this context and without writing logic into the view file, respecting safety precautions.
What I have:
Controller:
...
use Illuminate\Support\Facades\DB;
...
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
]
);
}
View:
<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>
and
<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>
The database tables are:
sport_categories (id, name, desc)
and
sports (id, sport_category_id, name, desc)

Answer 1

You'll need to use some sort of Javascript for this to work like you want. As #Clint suggested, since PHP is server-side, you won't be able to change your UI at runtime.
The good news is, you can keep everything you've already done. Depending on your comfort level with Javascript, it could be as easy as doing a show/hide of different html inputs based on what is selected.
Using jQuery, you could do something like this:
<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;
}
Doing something like that would render/hide all of your available options when the page loads. You'd use CSS to hide the actual form elements, then using jQuery you could show/hide things as needed. This could get messy if you have a lot of things to manage.
Another option would be to make your form a Vue component. You could then use v-show based on what was chosen.
A final alternative (using either way) would be to listen for the input to change -- then make an ajax request to get your data and show the input based on the server's response.
Vue would give you a bit cleaner code. You could get the data and only show what's needed and not have to worry about all the show/hide business. :)
Hope that helps!