我使用bootstrap-select并且一切正常,直到我的select标签的选项都填充了来自php文件的数据。我已经看过关于这个主题的每篇文章,但没有答案。所以这是一个例子: 式:
<link rel="stylesheet" href="dist/css/bootstrap-select.css"><!-- This is from my path-->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
HTML:
<!-- This is working -->
<div class="players col col-lg-3">
<label for='selectPlayer'> Pick the Player: </label>
<select class='selectpicker' data-style='btn-info'>
<optgroup id="opt" label='Players'>
<option>Ronaldo</option>
</optgroup>
</select>
</div> <!-- Select Player -->
<!-- This is not working,when using ajax jquery -->
<label for='selectClub'> Tested ajax jquery : </label>
<div id="players1" class="players1" data-container="body"></div> <!-- Jquery-->
脚本:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script> <!-- This is from my path,and must be at the end-->
<script>
/* ---------- References ---------- */
// http://stackoverflow.com/questions/15726411/how-to-use-bootstrap-select
// http://stackoverflow.com/questions/5807565/return-value-from-ajax-call-is-not-shown-in-the-page-source
$(document).ready(function() {
$.ajax({
type:"GET",
url:'selectPHP.php',
data:{},
success: function (response) {
alert(response);
$('#players1').html(response);
console.log((response));
},
error: function () {
$('#players1').html('There was an error!');
}
});
$('.selectpicker').selectpicker({
style: 'btn-primary',
size: 2
});
});
</script>
php文件:
echo "<select class='selectpicker' data-style='btn-primary'>";
echo "<option> data 1 </option>";
echo " </select><!-- select -->";
我使用ajax接收数据,但这些数据未显示在页面上。 例如,我使用了bootstrap-table,它正在工作,但不是在bootstrap-select的情况下。 你有关于这个主题的任何提示吗?
祝你好运
答案 0 :(得分:5)
在成功调用Ajax调用结果后,需要初始化selectpicker:
$(document).ready(function () {
$.ajax({
type: "GET",
url: 'selectPHP.php',
data: {},
success: function (response) {
alert(response);
$('#players1').html(response);
console.log((response));
$('.selectpicker').selectpicker({
style: 'btn-primary',
size: 2
});
},
error: function () {
$('#players1').html('There was an error!');
}
});
});
答案 1 :(得分:1)
您需要刷新选择器
<script>
/* ---------- References ---------- */
// http://stackoverflow.com/questions/15726411/how-to-use-bootstrap-select
// http://stackoverflow.com/questions/5807565/return-value-from-ajax-call-is-not-shown-in-the-page-source
$(document).ready(function() {
$.ajax({
type:"GET",
url:'selectPHP.php',
data:{},
success: function (response) {
alert(response);
$('#players1').html(response);
console.log((response));
},
error: function () {
$('#players1').html('There was an error!');
}
});
$( '.selectpicker' ).selectpicker( 'refresh' );;
});
</script>
答案 2 :(得分:0)
或者这会有所帮助:
for ind = 1:min(size(A))
t = A(ind,:);
A(ind,:) = circshift(t,[0 -(find(t)-ind)]);
end
在ajax页面的末尾(selectPHP.php)。
答案 3 :(得分:0)
这将有所帮助。 请检查您的CDN和Selecpicker文件。 如果以编程方式添加选项,则需要在添加选项后刷新选择器。 试试这个;
$('.selectpicker').selectpicker('refresh');