如何在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> 

Answer 2

您是否有返回json外观的示例？