[英]dynamically populate options in search-box(select) bootstrap jquery
我正在追踪( 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 );
});
});
};
当ajax调用成功并且您为<select>
获得新的<option>
,您可以正确地插入它,但是为了在bootstrap小部件(您的情况下为selectpicker)中反映这些更新,您需要使用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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.