Question

我正在使用bootstrap selectpicker，但在通过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

使用$(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'); });，并且不要忘记为该选择元素使用ID。

<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>

// router.js
Router.map(function() {
  // ...
  this.route('school', { path: ':school_id' }, function() {
    this.route('performance');
  });
  // ...
})

// the school route
import Route from '@ember/routing/route';

export default class extends Route {
  async model(params) {
    const { school_id } = params;

    const school = await store.findRecord(
      'school', school_id, { include: 'students' }
    );

    return { school }          
  }
}

// the performance route
import Route from '@ember/routing/route';

export default class extends Route {
  async model() {
     // get the id from the parent route
    const { school_id } this.paramsFor('school');

    const school = await store.findRecord(
      'school', school_id, { include: 'students.records' }
    );
    // depending if the relationship is async or not, students
    // will need to be awaited
    const students = await school.students;

    return { students }          
  }
}

引导程序选择器不适用于动态选项

1 个答案: