使用AJAX加载Bootstrap选择器

Question

我有一个类似的问题这和这一个 。 我已经尝试了注释中描述的所有解决方案。 到了某种程度的工作。

我的问题，当我选择从选项#main_cat的内容.sub_cat装在第一时间（AJAX是正确加载）。 但是，如果我从#main_cat选择另一个选项， #main_cat加载内容，但不使用select- #main_cat样式。 它只是显示：

glyphicon-sort-by-alphabetOPTION 1 （以下屏幕截图）

的HTML

<select id="main_cat" name="main_cat" class="selectpicker">
    <option selected="-1">Kies een thema</option>
    <option value="Actief_Avontuur" data-name="Actie & avontuur" data-icon="glyphicon-sort-by-alphabet" class="special">&nbsp;&nbsp;Actief, sportief en avontuurlijk</option>
    <option value="Creatief" data-name="Creatief" data-icon="glyphicon-sort-by-alphabet-alt" class="special">&nbsp;&nbsp;Creatief</option>
</select>
<select name="sub_cat" disabled="disabled" class="selectpicker_1 sub_cat">

jQuery的

$(function(){
    $('#main_cat').change(function(){
        var $option = $(this).find('option:selected'),
            id = $option.val(),
            name = $option.data('name');
            // open your browser's console log and ensure that you get the correct values
        console.log(id, name);
            $(".sub_cat").empty();
            // call ajax
        $.ajax({
            url: "<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",     
            type:'POST',
            data: {
                action: 'my_special_ajax_call',
                main_catid: id,
                main_name: name
            },
            success: function (results) {
                $(".sub_cat").removeAttr('disabled').html(results);
                $('.selectpicker_1').selectpicker(["refresh"]);
            }
        });
    });
});         

我尝试使用以下方法刷新两个selectpickers ：

$('.selectpicker').selectpicker(["refresh"]);
$('.selectpicker_1').selectpicker(["refresh"]);

这（如链接中的问题所建议）

$('.selectpicker').selectpicker({});

以下是一些屏幕截图：第一个是我第一次选择该选项时，第二个是我从#main_cat选择另一个选项时。 我需要对foreach做些什么，以便在AJAX完成后不断重新加载吗？ 有人知道解决方案吗？

第一次选择一个选项

第二次选择一个选项

Answer 1

我曾经这样使用：

$.ajax({
    url: "yoururl",
    type: 'post',
    data: {data: data},
     success: function(response){
            target.empty();
            target.html(response);
            target.selectpicker('refresh'); // without the []
    }
});

请注意，我清空了选择内容，使响应变得愚蠢，并在……之后刷新……它工作正常！ ：D希望这会有所帮助...

Answer 2

您需要添加以下内容：

.done(function (msg) {
    $("#models_dropdown").html(msg).selectpicker('refresh');
});