Question

我正在使用 Bootstrap v3 和Codeigniter ...在我的应用中，有两个选择选项元素，用于选择州和城市。我正在使用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选择选项元素在其他浏览器上有坏观点！（这对铬很好）。所以我决定使用bootstrap-select插件：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>

求助：我找到了解决方案......只需在填充select元素后添加一行！

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

Answer 1

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

也许这是因为$（＆＃39; #city＆＃39;）。empty（）行？

如果是这样的话，那么你可以尝试使用新选择重新开始吗？ E.g。

替换：$（＆＃39; #city＆＃39;）。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

*未测试

（如果以上工作可能有点矫枉过正，您可以通过在重新加载后重新初始化城市选择来解决问题。即，您只需要$（＆＃39; #city＆＃ 39;）。selectpicker（）; line）。

引导选择下拉

1 个答案: