twitter-bootstrap 使用 AJAX 加载 Bootstrap 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43515919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading Bootstrap select-picker using AJAX
提问by Jay-oh
I have a similar problem to thisand 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_catthe content for .sub_catis loaded the first time (AJAX is loading correctly). But if I select another option from the #main_catthe content is loaded but not using the select-picker style. It just shows:
我的问题，当我从#main_cat内容中选择一个选项时.sub_cat是第一次加载（AJAX 加载正确）。但是，如果我从#main_cat加载的内容中选择另一个选项但不使用选择选择器样式。它只是显示：
glyphicon-sort-by-alphabetOPTION 1(screenshots below)
glyphicon-sort-by-alphabetOPTION 1（以下截图）
HTML
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"> Actief, sportief en avontuurlijk</option>
<option value="Creatief" data-name="Creatief" data-icon="glyphicon-sort-by-alphabet-alt" class="special"> Creatief</option>
</select>
<select name="sub_cat" disabled="disabled" class="selectpicker_1 sub_cat">
jQuery
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 selectpickersusing:
我尝试selectpickers使用以下方法刷新两者：
$('.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 foreachso that I constantly reloads when AJAX is done? Someone know of a solution?
以下是一些屏幕截图：第一个是我第一次选择该选项时，第二个是我从#main_cat. 我是否必须对 a 做一些事情，foreach以便在 AJAX 完成后不断重新加载？有人知道解决方案吗？
Selecting an option for the first time
第一次选择一个选项
Selecting an option for the second time
第二次选择一个选项
回答by ArtFranco
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...
请注意，我清空了选择，使响应变笨并在之后刷新......它工作正常！:D 希望这有助于...
回答by ibrahim barada
You need to add the following:
您需要添加以下内容：
.done(function (msg) {
$("#models_dropdown").html(msg).selectpicker('refresh');
});
