如何使用带有ajax请求的select2加载数据?

时间:2019-07-08 07:36:56

标签: javascript php jquery ajax jquery-select2

如何通过使用Select2获取JSON中的所有数据,然后如果我选择一个flight_no,我希望选择airlines_name自动化

<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-12">
  <p>Flight No</p>
</div>
<div class="col-4">
  <div class="form-group">
    <select class="form-control" id="" style="background-color:#dcdcdc;">
      <option selected hidden>Code</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</div>
$('#airlines').select2({
  allowClear: true,
  placeholder: 'Select Airlines',
  ajax: {
    dataType: 'json',
    type: 'GET',
    delay: 200,
    url: '{{route('
    search - airlines ')}}',
    processResults: function(data) {
      return {
        results: data.map(function(item) {
          return {
            id: item.airlines_id,
            text: item.airlines_name
          }
        })
      }
    }
  }
}).on('select2:select', function(e) {
  var data2 = $("#airlines option:selected").text();
  alert("choose" + data2);
});

结果json

[
    {
        "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"
    }
]   

0 个答案:

没有答案