Мой выпадающий список с использованием начальной загрузки начальной загрузки не заполнен - PullRequest
Новая
       23

Мой выпадающий список с использованием начальной загрузки начальной загрузки не заполнен

0 голосов
/ 07 марта 2019

Я пытаюсь создать выпадающий список с несколькими выборками, используя файлы начальной загрузки javascript и css.К сожалению, мой динамически созданный набор параметров (с использованием AJAX), по-видимому, не заполняет список.

Я знаю, что это должно быть связано с функцией множественного выбора, потому что когда я настраиваю его как раскрывающийся список с одним выбором,это прекрасно работает.

Интересно, связано ли это с тем, когда эта функция вызывается.Список вызывается не тогда, когда документ готов, а после успешного вызова ajax.

Вот код: 

function Participants(sid){
    console.log(sid);
    $('#participants').empty()
     $('#participants').append("<option>Loading......</option>");
    $.ajax({ 
           method:"POST",
           url:"participants_dropdown.php?sid="+sid,
           contentType:"application/json; charset=utf-8",
           dataType:"json",
           success: function(data){
           console.log('success')
           $('#participants').empty();
           $('#participants').append("<option value='0'>---Select Participants---</option>");
           $.each(data, function(i, item){
                  $('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>');
                  });
           },
           complete: function(){
           }
           });
    $('#participants').multiselect('destroy');
    $('#participants').multiselect();
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>





<div class="col-md-4">
<h3><span>2) Select Market Participants</span></h3>
<select id="participants" multiple class="form-control">
</select>
</div>


<!---sample JSON
[{"operator":"Nexstar Media Group Inc","owner":"Mission Broadcasting Inc","call_sign":"KRBC-TV","facility_id":"306","primary_programming":"NBC"},{"operator":"Nexstar Media Group Inc","owner":"Nexstar Media Group Inc","call_sign":"KTAB-TV","facility_id":"59988","primary_programming":"CBS"},{"operator":"Prime Time Christian Broadcasting Incorporated","owner":"Prime Time Christian Broadcasting Incorporated","call_sign":"KPCB-DT","facility_id":"77452","primary_programming":"REL"},{"operator":"Sinclair Broadcast Group Inc","owner":"Sinclair Broadcast Group Inc","call_sign":"KTXS-TV","facility_id":"308","primary_programming":"ABC"},{"operator":"TEGNA Inc","owner":"TEGNA Inc","call_sign":"KXVA","facility_id":"62293","primary_programming":"FOX"}]--->

Будем благодарны за любые рекомендации.Я пробовал различные решения, предложенные в подобных постах, но не повезло.

1 Ответ

1 голос
/ 07 марта 2019

В вашей функции участников у вас есть вызов ajax.Поскольку это асинхронный вызов, вам нужно переместить команду разрушения и создать multiselect внутри фрагмента успеха: 

function Participants(sid){
     console.log(sid);
     $('#participants').empty()
     $('#participants').append("<option>Loading......</option>");
     $.ajax({
         method:"POST",
         url:"participants_dropdown.php?sid="+sid,
         contentType:"application/json; charset=utf-8",
         dataType:"json",
         success: function(data){
             console.log('success')
             $('#participants').multiselect('destroy');
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HERE
             $('#participants').empty();
             $('#participants').append("<option value='0'>---Select Participants---</option>");
             $.each(data, function(i, item){
                 $('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>');
          });
             $('#participants').multiselect();
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HERE
         },
         complete: function(){
         }
     });
 }

Фрагмент (кнопка имитирует вызов ajax): 

$('#participants').empty()
$('#participants').append("<option>Loading......</option>");
$('#participants').multiselect();


$('#btn').on('click', function(e) {
    var data = [{"operator":"Nexstar Media Group Inc","owner":"Mission Broadcasting Inc","call_sign":"KRBC-TV","facility_id":"306","primary_programming":"NBC"},{"operator":"Nexstar Media Group Inc","owner":"Nexstar Media Group Inc","call_sign":"KTAB-TV","facility_id":"59988","primary_programming":"CBS"},{"operator":"Prime Time Christian Broadcasting Incorporated","owner":"Prime Time Christian Broadcasting Incorporated","call_sign":"KPCB-DT","facility_id":"77452","primary_programming":"REL"},{"operator":"Sinclair Broadcast Group Inc","owner":"Sinclair Broadcast Group Inc","call_sign":"KTXS-TV","facility_id":"308","primary_programming":"ABC"},{"operator":"TEGNA Inc","owner":"TEGNA Inc","call_sign":"KXVA","facility_id":"62293","primary_programming":"FOX"}];
    $('#participants').multiselect('destroy');
    $('#participants').empty();
    $('#participants').append("<option value='0'>---Select Participants---</option>");
    $.each(data, function(i, item){
        $('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>');
    });
    $('#participants').multiselect();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>

<div class="col-md-4">
    <h3><span>2) Select Market Participants</span></h3>
    <select id="participants" multiple class="form-control">
    </select>
    <button id="btn" class="btn btn-primary">Click Me</button>
</div>
...