如何在jQuery Select2中获取flight_no值并实现联动填充

Got it, let's sort this out for you! The main issues here are twofold: your code wasn't accessing the correct data path from your JSON response, and you weren't pulling the stored flight_no value from the selected Select2 item. Here's how to fix it step by step:

Step 1: Correct the Data Mapping in processResults #

Your returned JSON wraps the airlines array inside a DATA property, but your original code was trying to map directly on the root data object. We'll also use a more explicit property name (flight_no instead of slug) to make it easier to reference later.

$('#airlines').select2({
  allowClear: true,
  placeholder: 'Select Airlines',
  ajax: {
    dataType: 'json',
    type: 'POST',
    delay: 250,
    url: '{{route('search-airlines')}}',
    data: function(param){
      return { airlines: param.term }
    },
    processResults: function(data, param){
      return {
        // Map over the DATA array from your JSON response
        results: data.DATA.map(function(item){
          return {
            id: item.airlines_id,
            text: item.airlines_name,
            flight_no: item.flight_no // Store flight_no explicitly
          }
        })
      }
    }
  }
});

Step 2: Access flight_no on Selection #

Instead of just getting the id with .val(), we need to fetch the full selected item data from Select2. You can do this either automatically when the user selects an option, or keep your click handler for the #codeAirline select.

Option A: Auto-Populate on Selection (Recommended) #

Add a select2:select event listener to the airlines select to instantly populate the flight number:

$('#airlines').on('select2:select', function(e) {
  const selectedAirline = e.params.data;
  // Update the target select box with flight_no
  $('#codeAirline').empty().append(`
    <option value="${selectedAirline.flight_no}">${selectedAirline.flight_no}</option>
  `);
});

// Handle clearing the selection too
$('#airlines').on('select2:clear', function() {
  $('#codeAirline').empty().append('<option value="">Select Airlines First</option>');
});

Option B: Keep Your Click Handler #

If you prefer to populate only when the user clicks #codeAirline, modify the click event to fetch the full selected data:

$('#codeAirline').click(function() {
  const selectedItem = $('#airlines').select2('data')[0];
  if (selectedItem) {
    $('#codeAirline').empty().append(`
      <option value="${selectedItem.flight_no}">${selectedItem.flight_no}</option>
    `);
  } else {
    $('#codeAirline').empty().append('<option value="">No Airlines Selected</option>');
  }
});

Key Notes #

• JSON Data Path: Always match your processResults mapping to the actual structure of your API response. Your data lives inside the DATA key, so we use data.DATA.map.
• Storing Extra Data: Select2 lets you add custom properties to the result objects (like flight_no here) which you can access later via the Select2 API or event parameters.
• Select Box Best Practices: Instead of just updating the text of a single option, we empty the target select and add a new option with the flight number as both the value and display text for proper form submission behavior.

内容的提问来源于stack exchange，提问作者Muhamad Rahmat Setiawan