Как инициализировать (и повторно инициализировать) bootstrap-select через JavaScript

Question

У меня есть мода загрузочного лотка с одним полем «выбрать», которое я использую для выбора цветов или гендерных разрезов или размеров для выбранного продукта одежды на моем веб-сайте beckend приложение.

Я получаю данные через ajax, возвращая массив json с {Id, Text, Val} для цвета/пола или размера (id отличает цвет/пол/размер), и я очищаю свой выбор перед добавлением новых параметров ,

это хорошо работает со стандартным HTML выбрать ..

<select id="productProperty" class="form-control" multiple></select> 

выход со стандартным выберите:

, но ничего не работает с boostrap-выберите

<select id="productProperty" class="form-control selectpicker" multiple></select> 

Выход с бутстрапом выберите:

[

вот мой Аякса вызов

 $.ajax({ url: 'theUrl', 
       type: "GET", 
       data: { requiredInput: 'that' } 
      }).done(function(response) { 

       $("#productProperty").empty(); 
       var selectHtml = ""; 
       $.each(response.data, function(index, item) { 
        selectHtml += "<option value='" + item.Id + "' " + disabled_ + ">" + item.Name + "</option>"; 
       }); 

       $("#productProperty").html(selectHtml); 
       $("#productProperty").selectpicker('refresh'); 

      }); 

У меня есть $ ('selectpicker'). Selectpicker() на мой макет (MVC) файл как я с DatePicker и DataTables

Как я могу это обработать с помощью bootstrap-select?. Спасибо.

Answer 1

Почему бы вам просто не построить все это через jQuery?

Во-первых, сделайте выберите выпадающее меню:

var html = ""; 
html += '<select id="productProperty" class="form-control selectpicker" multiple>'; 

Затем пройти через AJAX:

$.ajax({ url: 'theUrl', 
      type: "GET", 
      data: { requiredInput: 'that' } 
     }).done(function(response) { 

      $.each(response.data, function(index, item) { 
       html += "<option value='" + item.Id + "' " + disabled_ + ">" + item.Name + "</option>"; 
      }); 
     }); 

Тогда близкие теги:

html += "</select>"; 

Append, и вы должны быть все хорошо.

$(".container").append(html);