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

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

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

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

Вот код:

function Participants(sid){
    console.info(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.info('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"}]--->

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

можете ли вы добавить значение, полученное при успехе ajax: console.info(data)?

— 06.03.2019 22:28

Вот что я получаю (для первых двух): 0: call_sign: "KRBC-TV" service_id: "306" оператор: "Nexstar Media Group Inc" владелец: "Mission Broadcasting Inc" primary_programming: "NBC" прото: Объект 1 : call_sign: "KTAB-TV" id объекта: "59988" оператор: "Nexstar Media Group Inc" владелец: "Nexstar Media Group Inc" primary_programming: "CBS" прото: Object "Как я уже сказал, я могу успешно заполнить один раскрывающийся список, так что может быть что-то с тем, как работает множественный выбор.

— 06.03.2019 22:32

Пожалуйста, преобразуйте строку: console.info(JSON.stringify(data));

— 06.03.2019 22:35

К исходному вопросу добавлен ответ json

— 06.03.2019 22:47

javascript jquery ajax bootstrap-multiselect

06.03.2019 22:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 468

Ответы 1

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

function Participants(sid){
     console.info(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.info('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>

Большое спасибо, что нашли время ответить. К сожалению, он по-прежнему не работает даже после вставки двух строк множественного выбора в предлагаемые места. Что более странно, так это то, что я скопировал код вашего примера (с кнопкой ниже), и даже это не сработало.... хотя когда я запускаю фрагмент на этой странице, он отлично работает. Есть предположения?

— 07.03.2019 00:10

Что также интересно, так это то, что мой пустой раскрывающийся список не отображается так же, как ваш. Он отображается как пустое поле, а слово «Нет выбранных» не появляется. Может ли это быть связано с другими загрузочными файлами, которые я мог загрузить на свой сервер?

— 07.03.2019 00:18

Взгляните на библиотеки, которые я использовал во фрагменте

— 07.03.2019 00:21

Догадаться. Во-первых, в вашем коде мне нужно было переместить javascript, вызывающий кнопку, под самой кнопкой. В моем коде после внесения ваших исходных изменений (которые решили мою первоначальную проблему) мне также пришлось включить библиотеку popper и загрузить ее перед bootstrap.min.js. Большое спасибо за вашу помощь.

— 07.03.2019 00:42

06.03.2019 23:10