Как получить элемент в jquery select2

Я хочу взять значение (flight_no), которое находится в функции processResults, поэтому, когда я выбираю название авиакомпании, код из названия авиакомпании должен быть заполнен (flight_no)

Я пытался получить (flight_no) в функции processResults, но получил только (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>

Мой 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"
        },
   ]
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
63
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

У вас есть пример того, как выглядит возвращаемый json?

например я выбираю 1 название авиакомпании, тогда форма с codeAirline id будет автоматически заполнена code/flight_no, например это видно из "my json"

Muhamad Rahmat Setiawan 09.07.2019 14:12
Ответ принят как подходящий

Добавьте событие change к выбранному элементу с идентификатором airlines. Когда значение выбрано, получите выбранное airlines_id и найдите в массиве, затем назначьте найденный Flight_no выбранному элементу с идентификатором 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.info(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>

Другие вопросы по теме