下拉式引导选择

Question

我正在使用Bootstrap v3和Codeigniter ...在我的应用中，有两个select选项元素，用于选择州和城市。 我正在使用ajax并在选择州时，在第二个元素中填充相关城市：

$('#state').change(function(){
    var state_id = $('#state').val();
    if(state_id != ""){
      var post_url = "<?php echo base_url(); ?>student/get_cities/" + state_id;
      $.ajax({
        type: "POST",
        url: post_url,
        cache: true,
        success: function(cities){ //calling the response json array 'cities'
            $('#city').empty();
            $.each(cities, function(id, city){
                $('#city').append($("<option></option>").val(id).text(city));
            }); //each
         }
     }); //ajax
    }
}); //change

一切都很好，只是bootstrap select option元素在其他浏览器上显示不佳！ （仅适用于chrome）。 所以我决定使用bootstrap-select插件： Bootstrap-Select
我的问题是 ：如何填充城市的第二选择选项？ 实际上，它将被填充，但是使用下拉列表进行引导选择时，我也必须填充它。
感谢您的关注...


编辑：

<select class="form-control selectpicker" name="state" id="state">
 <!--in a foreach loop, echo all states with the proper value-->
</select>

<select class="form-control selectpicker" name="city" id="city">
</select>

解决：我找到了解决方法...只需在填充选择元素后添加一行！

$('.selectpicker').selectpicker('refresh');

Answer 1

据我了解您的问题，城市选择将从AJAX填充，但失去了选择选择器功能？

也许是由于$（'＃city'）。empty（）行造成的？

如果是这样：那么您可以尝试以新的选择重新开始吗？ 例如

替换：$（'＃city'）。empty（）;

用这个代码

$('#city').remove();
$('#state').after( $('<select></select>').addClass('form-control selectpicker').attr({'id' : 'city', 'name' : 'city'}) );
//do your ajax stuff and add the options
$('#city').selectpicker(); //initialise it

*未测试

（如果上述方法行之有效，可能会过大，您只需在重新加载城市选择后重新初始化城市选择即可解决问题。即，您只需要$（'＃city'）。selectpicker（）;行） 。