使用ajax jquery的Bootstrap-select不起作用

时间:2015-08-28 17:38:20

标签: javascript jquery ajax twitter-bootstrap twitter-bootstrap-3

我使用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的情况下。 你有关于这个主题的任何提示吗?

祝你好运

4 个答案:

答案 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');