javascript - Bootstrap-select with ajax jquery 不工作

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

我正在使用 bootstrap-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 的情况下却没有。 你对这个主题有什么提示吗?

最好的问候

最佳答案

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

关于javascript - Bootstrap-select with ajax jquery 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32276793/

相关文章:

javascript - 将选项视为选择下拉列表上的单击事件

php - 从ajax获取数据并发送到mysql

jquery - 如何在不卡住网页的情况下同步调用ajax

php - 使用ajax将值输入类型文本发送到另一个php文件

javascript - anchor html (<a>) 仅适用于右键单击而不是左键单击

javascript - 在带有装饰器和 HOC 的类组件中使用react-i18next

jQuery 循环问题

javascript - 其他 html 元素的 Jquery .select()

javascript - 如何将 JavaScript 字符串转换为对象

c# - Javascript 不适用于 ASP.NET 上的 Timer Tick 方法