动态填充选项在搜索框(选择)bootstrap jquery

我遵循这个(http://www.jquery-az.com/boots/demo.php?ex=6.0_6)搜索框tut，但我的场景有点不同。我有国家，城市和位置人口动态，我想我的搜索框上的位置主要。
随着位置的动态填充，选项不会在搜索框中更新。有没有办法，在填充了选项后，我们触发刷新搜索框，这样它就会拾取那些新生成的选项。
这是我使用的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>

This Location字段:

<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 );
            });
        });
    };