javascript - 动态填充搜索框(选择) Bootstrap jquery中的选项

Question

我正在关注这个( http://www.jquery-az.com/boots/demo.php?ex=6.0_6 )搜索框，但我的情况有点不同。我有动态填充的国家、城市和位置，我希望我的搜索框主要在位置上。
由于位置动态填充，搜索框中的选项不会更新。有什么方法可以在位置填充选项后触发搜索框刷新，以便它拾取这些新生成的选项。
这是我正在使用的 html:

<div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">Countries<span></span></label>
    <div class="col-md-8">
      <select class="form-control selectpicker chosen-select" name="country_id" id="country_id" data-show-subtext="true" data-live-search="true" required>
           <option value="">Select</option>
           <?php  foreach ($countries as $key => $value) { ?>
                <option value="<?php echo $value['id']; ?>"><?php echo  $value['name_en']; ?>
           </option>
           <?php } ?>
      </select>
      <span class="help-block"></span>
    </div>
   </div>
 </div>

这是城市选择字段

<div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">Cities<span></span></label>
     <div class="col-md-8">
       <select class="form-control" name="city_id" id="city_id" required>
            <option value="">Select</option>
       </select>
       <span class="help-block"></span>
     </div>
   </div>
  </div>

此位置字段:

<div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">Location<span class=""></span></label>
       <div class="col-md-8">
         <div class="ui-widget">
         <?php echo form_error('location_id'); ?>
         <select id="cars_location" value="<?php echo 
                                            set_select('location_id'); ?>" type="text" class="form-control selectpicker " multiple name="location_id" data-show-subtext="true" data-live-search="true" required>
             <option value="">Select</option>
          </select>
         </div>
        <div class="omitted_location">

        </div>
       </div>
      </div>
     </div>

现在这些是我填充这些字段的 ajax 调用:

 window.onload = function(){ 
        $("#country_id").change(function (e) {
            var list    =   '';
            var country_id  =   $(this).val();
            var state = $.ajax({
            url: "<?php echo base_url()."Mrsaalaccess/get_record_by_id"; ?>",


                type: "POST",
                data: {id : country_id, get : "cities"},
                dataType: "text"
            });

            state.done(function(msg) {
                if(msg != 'error')
                {
                     $("#city_id").html(msg);
                }
               else{
                    $("#city_id").html(msg);
                }
            });


            state.fail(function(jqXHR, textStatus) {
                console.log( "Request failed: " + textStatus );
            });
        });

        $("#city_id").change(function (e) {
            var list    =   '';
            var city_id  =   $(this).val();
            var state = $.ajax({
                url: "<?php echo base_url()."Mrsaalaccess/get_location_by_id"; ?>",
                type: "POST",
                data: {id : city_id, get : "locations"},
                dataType: "text"
            });


            state.done(function(msg) {
              if(msg != 'error')
                {
                    //Here i'm sending options to locations
                    //which isn't getting populated dynamically
                    $("#cars_location").html(msg); 
                }
               else{
                    $("#location_id").html(msg);
                }
            });

            state.fail(function(jqXHR, textStatus) {

                console.log( "Request failed: " + textStatus );

            });
        });
    };

Answer 1

当ajax调用成功并且你得到新的<option>时s 为 <select>您插入正确，但为了反射(reflect) bootstrap 小部件(在您的情况下是一个选择器)中的这些更新，您需要使用 selectpicker('refresh') 刷新它.所以万一发生了..

//Here i'm sending options to locations
//which isn't getting populated dynamically
$("#cars_location").html(msg); 
$('#cars_location').selectpicker('refresh'); // <-- add this