如何在jquery select2中获取项目

时间:2019-07-09 12:00:20

标签: javascript php jquery ajax jquery-select2

我想获取processResults函数中的值(flight_no),所以当我选择航空公司名称时,必须用(flight_no)填充航空公司名称中的代码

我试图获取processResults函数中的(flight_no),但我只得到(airline_id)

list_of_df = ['NPSFeedback', 'courses','test'] 
dict_df = dict()

for filename in list_of_df :
    df = pd.read_json(filename + ".json")
    df.replace('', np.nan, inplace=True)
    dict_df[filename] = df

我的json

$('#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>

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

change事件添加到ID为airlines的select元素中。选择该值后,获取选定的airlines_id并在数组中查找,然后将找到的flight_no分配给ID为codeAirline的select元素。

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>