I have two select2. The first one fills in automatically and selects the first default value.
My second select2 that shows data depending on the data that the first select2 has, works by AJAX.
My problem is that I want when the value of the first select2 changes, the second select2 is updated and selects the first value from the list of options.
I have seen that in other posts and it has not worked for me. Investigating more on my own I have realized what my problem is.
The second select2 doesn't update the values, fetching them from the database until I click on it.
I would like this second select2 that works by ajax to search for the values automatically when I change the option of the first select2 and to select the first resulting option for me.
I attached the code so you can get an idea
function filtersTable() {
let center_select = $('#center_bookings_today_table');
$.each(centers, function (i, center) {
center_select.append('<option value="' + i + '" title="' + center + '">' + center + '</option>');
});
$('#center_bookings_today_table').select2({
placeholder: '',
});
getGroupsTable();
}
function getGroupsTable() {
let center = $('#center_bookings_today_table').val();
$("#group_bookings_today_table").val('').trigger('change');
let data = '?center=' + center;
$( "#terminals_hours" ).empty();
$('#restrictions').hide();
$("#group_bookings_today_table").select2({
ajax: {
url: '{{ route('get_search_groups_center', ['client' => $client]) }}' + data,
dataType: 'json',
processResults: function (response) {
return {
results: response
};
},
cache: true
},
language: {
inputTooShort: function () {
return '{{ trans('common.insert_chars') }}';
}
}
});
$("#chart_bookings_today_table").hide();
}
Thanks in advance. Excuse my English I'm using google translator