使用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');
});