j'ai deux dropdown dependants.
Je souhaite récupérer les valeurs sélectionnées par l'utilisateur pour afficher les données dans une liste (via une base de donnée).
DropDown category
Code : Tout sélectionner
<select class="form-control" name="category" id="category">
@foreach ($category as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
</select>
Code : Tout sélectionner
<select class="form-control" name="course" id="course">
</select>
Code : Tout sélectionner
<script>
$(document).ready(function() {
$('#category').on('change', function() {
var categoryID = $(this).val();
if(categoryID) {
$.ajax({
url: '/getCourse/'+categoryID,
type: "GET",
data : {"_token":"{{ csrf_token() }}"},
dataType: "json",
success:function(data)
{
if(data){
$('#course').empty();
$('#course').append('<option hidden>TOUS</option>');
$('#course').append('<option>TOUS</option>');
$.each(data, function(key, course){
$('select[name="course"]').append('<option value="'+ key +'">' + course . name+ '</option>');
});
}else{
$('#course').empty();
}
}
});
}else{
$('#course').empty();
}
});
});
</script>
Code : Tout sélectionner
<div class="flex">
<a href="{{ route('search', category.selected.value , course.selected.value ) }}"
<button type="button" class="rounded-lg text-center text-align-middle px-2 py-2 bg-blue-600 text-white font-medium text-xs leading-tight uppercase hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out">RECHERCHE</button></a>
</div>
Merci de vos lumières !
Bonne soirée à tous !