Bootstrap selectpicker 无法处理动态选项

Question

我正在使用 bootstrap 选择器，但是当我使用 jquery 动态添加选项时它不起作用。

在手动添加选项 html 时比它正在唤醒

html

      <div class="form-group col-md-3">
         <label class="bold" >Exam Type</label>
            <select  class="exam_type_element_multiple"  name="exam_type_element" data-live-search="true" multiple data-style="btn-info" data-selected-text-format="count">
               <option value="1">Bank</option>
               <option value="3">Railways</option>
            </select>
        </div> 
        <div class="form-group col-md-3 ">
           <label class="bold" >Sub Exam Type</label>
           <select  class="exam_sub_type_element_multiple"  name="exam_sub_type_element" data-live-search="true" multiple data-style="btn-warning" data-selected-text-format="count">

           </select>
         </div>

jquery

$('.exam_type_element_multiple').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
    all_cat = $main_stream_result_json;
    main_selected  = $(this).val();
    var html = '';
    $.each(main_selected, function( index, value ) {
        $.each(all_cat, function( i, v ) {
            if(value == v.id){
                html +=  '<optgroup label="'+v.name+'">';
            }
        });
        $.each(all_cat, function( i, v ) {
            if(value == v.parent_id){
                html +=  '<option value="'+v.id+'">'+v.name+'</option>';
            }
        });
        html +='</optgroup>';
    });
    $('.exam_sub_type_element_multiple').selectpicker('destroy');
    $('.exam_sub_type_element_multiple').html($.parseHTML(html));
    // if uncommenting this line than this option is working 
    //$('.exam_sub_type_element_multiple').html('<option value="123">123</option>'); 
    $('.exam_sub_type_element_multiple').selectpicker('render');

Answer 1

使用 $('#exam_sub_type_element_multiple').selectpicker('refresh'); 并且不要忘记为该 select 元素使用 ID。

$(document).ready(function(){
$('.exam_type_element_multiple,#exam_sub_type_element_multiple').selectpicker();

});


$('.exam_type_element_multiple').on('change', function (e, clickedIndex, isSelected, previousValue) {
    var all_cat =jQuery.parseJSON( '[{"id":"1", "parent_id":"3", "name":"abc"},{"id":"3", "parent_id":"1", "name":"cde"}]');
    var main_selected  = $(this).val();
    var html = '';
    
    $.each(main_selected, function( index, value ) {
        $.each(all_cat, function( i, v ) {
            if(value == v.id){
                html +=  '<optgroup label="'+v.name+'">';
            }
        });
        $.each(all_cat, function( i, v ) {
            if(value == v.parent_id){
                html +=  '<option value="'+v.id+'">'+v.name+'</option>';
            }
        });
        html +='</optgroup>';
       
   });
   
    $('#exam_sub_type_element_multiple').empty();
     $('#exam_sub_type_element_multiple').append($.parseHTML(html));
    $('#exam_sub_type_element_multiple').selectpicker('refresh');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet"/>

<div class="form-group col-md-3">
         <label class="bold" >Exam Type</label>
         <select  class="exam_type_element_multiple"  name="exam_type_element" data-live-search="true" multiple data-style="btn-info" data-selected-text-format="count">
               <option value="1">Bank</option>
               <option value="3">Railways</option>
         </select>
</div> 

<div class="form-group col-md-3 ">
           <label class="bold" >Sub Exam Type</label>
           <select  id="exam_sub_type_element_multiple"  name="exam_sub_type_element" data-live-search="true" multiple data-style="btn-warning" data-selected-text-format="count">
           
           </select>
</div>

Bootstrap selectpicker 无法处理动态选项

Bootstrap selectpicker is not working on dynamic option

jquery

twitter-bootstrap

bootstrap-selectpicker