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"
},
]
}
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>
您是否有返回json外观的示例?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.