doutouhe5343 2017-04-20 09:45
浏览 75
已采纳

使用AJAX加载Bootstrap选择器

I have a similar problem to this and this one. I've tried all the solutions that are described in the comments. And got to a point where it sort of works.

My problem, when I select a option from #main_cat the content for .sub_cat is loaded the first time (AJAX is loading correctly). But if I select another option from the #main_cat the content is loaded but not using the select-picker style. It just shows:

glyphicon-sort-by-alphabetOPTION 1 (screenshots below)

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"]);
            }
        });
    });
});         

I have tried refreshing both selectpickers using:

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

And this (as was suggested in the question in the link)

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

Here are some screenshots: The first one is when I select the option for the first time and the second one is when I select another option from #main_cat. Do I have to do something with a foreach so that I constantly reloads when AJAX is done? Someone know of a solution?

Selecting an option for the first time Selecting an option for the first time

Selecting an option for the second time Selecting an option for the second time

  • 写回答

2条回答 默认 最新

  • dqan70724 2017-07-12 15:14
    关注

    I've used like this:

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

    Note that I empty the select, dumbing the response and refreshing after... it worked fine! :D hope this helps...

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗?
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路