如何在jquery select2中获取项目

Question

I want to take the value (flight_no) that is in the processResults function, so when I select the airline name the code from the airlines name must be filled with (flight_no)

I have tried to get (flight_no) that is in the processResults function, but which I only get (airline_id)

$('#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 {
                    results: data.map(function(item){
                        return { id: item.airlines_id,text: item.airlines_name, slug: item.flight_no} 
                    })
                }
            }
        }
    });

    $('#codeAirline').click(function () {
        $('#output').text($('#airlines').val());
    });


<div class="col-12 clearfix">
    <label for=""><p class="mb-0">Airlines</p></label>
    <select id="airlines" name="airlines" style="width: 100%;max-height: 100%; background-color: #e8e4e473;" required>
            <option value="">Select airlines</option>
    </select>
</div>
<div class="col-4">
    <div class="form-group">
        <select class="form-control" id="codeAirline" style="background-color:#dcdcdc;">
            <option id="output"></option>
        </select>
    </div>
</div>

My json

{
    "DATA": [
        {
            "airlines_id": 1,
            "airlines_name": "Garuda Airlines",
            "status": "1",
            "flight_no": "GA"
        },
        {
            "airlines_id": 3,
            "airlines_name": "Sriwijaya Airlines",
            "status": "1",
            "flight_no": "SJ,SA"
        },
        {
            "airlines_id": 4,
            "airlines_name": "Susi Airlines",
            "status": "1",
            "flight_no": "SI"
        },
        {
            "airlines_id": 5,
            "airlines_name": "Multi Airlines",
            "status": "1",
            "flight_no": "MA,MU,MAS"
        },
   ]
}

Answer 1

Add change event to your select element with id airlines. When the value is selected, get the selected airlines_id and find within the array, then assign the found flight_no to the select element with id codeAirline.

const input = {
  "DATA": [{
      "airlines_id": 1,
      "airlines_name": "Garuda Airlines",
      "status": "1",
      "flight_no": "GA"
    },
    {
      "airlines_id": 3,
      "airlines_name": "Sriwijaya Airlines",
      "status": "1",
      "flight_no": "SJ,SA"
    },
    {
      "airlines_id": 4,
      "airlines_name": "Susi Airlines",
      "status": "1",
      "flight_no": "SI"
    },
    {
      "airlines_id": 5,
      "airlines_name": "Multi Airlines",
      "status": "1",
      "flight_no": "MA,MU,MAS"
    },
  ]
};


const airlinesDropdown = $('#airlines');
const flightNum = $('#codeAirline');

input["DATA"].forEach(({
  airlines_id,
  airlines_name,
  flight_no
}) => {
  airlinesDropdown.append(`<option value="${airlines_id}">${airlines_name}</option>`);
  flightNum.append(`<option value="${flight_no}">${flight_no}</option>`);
});

$('#airlines').on('change', function() {
  const selectedAirline = $(this).val();
  const {
    flight_no
  } = input["DATA"].find(({
    airlines_id
  }) => airlines_id == +selectedAirline);
  console.log(flight_no);
  flightNum.val(flight_no);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-4">
  <select id="airlines" name="airlines" style="width: 100%;max-height: 100%; background-color: #e8e4e473;" required>
    <option value="">Select airlines</option>
  </select>
</div>
<br>
<div class="col-4">
  <select class="form-control" id="codeAirline" style="background-color:#dcdcdc;">
    <option value="">Select</option>
  </select>
</div>

</div>