Tengo dos select2. El primero se rellena automáticamente y selecciona el primer valor predeterminado.

Mi segundo select2 que muestra datos dependiendo de los datos que tiene el primer select2, funciona por AJAX.

Mi problema es que quiero que cuando cambie el valor del primer select2, el segundo select2 se actualice y seleccione el primer valor de la lista de opciones.

Lo he visto en otros post y no me ha funcionado. Investigando más por mi cuenta me he dado cuenta de cuál es mi problema.

El segundo select2 no actualiza los valores, sino que los obtiene de la base de datos hasta que hago clic en él.

Me gustaria que este segundo select2 que funciona por ajax busque los valores automaticamente cuando cambio la opcion del primer select2 y me seleccione la primera opcion que resulte.

Adjunto el código para que te hagas una 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(); }

Gracias por adelantado. Disculpe mi ingles estoy usando el traductor de google