Bootstrap Select With Dropdown

Bootstrap Select With Dropdown

本文关键字：Dropdown With Select Bootstrap      更新时间：2023-09-26

我正在使用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

一切都很好，只是引导程序选择选项元素在其他浏览器上的视图不好！（仅镀铬就很好）。所以我决定使用引导选择插件：引导选择
我的问题是：如何填充城市的第二个选择选项？事实上，它将被填充，但引导程序使用下拉菜单选择，我也必须填充它。
感谢关注。。。


编辑：

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




已解决：我找到了解决方案。。。只需在填充select元素后添加一行即可

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

我理解您的问题，城市选择将从AJAX中填充，但它失去了selectpicker功能？

也许这是由于$（'#city'）.empty（）行的缘故？

如果是的话：那么你能试着用一个新的选择重新开始吗？例如

replace:$（'#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（）；行）。

相关文章：