Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

253
Views
Change the value of a select2 when I modify the value in another select2

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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!