动态填充搜索框中的选项（选择）引导jquery

问题描述：

我关注此（http://www.jquery-az.com/boots/demo.php?ex=6.0_6）搜索框tut，但我的场景有点不同。我有国家，城市和位置动态填充，我希望我的搜索框主要位置。
由于位置动态填充，选项不会在搜索框中更新。有没有什么办法，填充位置的选项后，我们触发刷新搜索框，以便它会拾取这些新生成的选项。
这里是我使用的HTML：动态填充搜索框中的选项（选择）引导jquery

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

      }); 
     }); 
    };

答

当ajax调用成功，你得到新的<option> s为<select>你插入它的权利，但为了反映在你的情况是一个selectpicker引导小部件这些更新，你需要刷新它使用selectpicker('refresh')。所以of loaction ..

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

动态填充搜索框中的选项（选择）引导jquery

相关推荐