带有ajax jquery的引导选择不起作用答案

【问题标题】：Bootstrap-select with ajax jquery is not working带有ajax jquery的引导选择不起作用
【发布时间】：2015-08-28 17:38:19
【问题描述】：

我正在使用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 的情况下却不行。你对这个话题有什么提示吗？

最好的问候

【问题讨论】：

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

【解决方案1】：

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

【讨论】：

从 Ajax 获取数据后会发生什么？它是否在“players1”div 中显示任何“select”元素？控制台有错误吗？
不，不，现在很好，但是你能解释一下为什么初始化需要在 ajax 调用中，在你的情况下，最后？我也有在 ajax 调用之后初始化（逻辑：我会有innerhtml，然后我将初始化.selectpicker）。在你的情况下，逻辑是相同的，但它在 ajax 块内。有什么区别？
Ajax 的成功回调函数只有在你的数据从服务器加载并且你的 DOM 中有 html 之后才会被调用。当您在 Ajax 调用之外初始化 selectpicker 时，就像您在问题中所做的那样， $('.selectpicker') 不会提供来自 DOM 的任何元素，因此我们不能对其应用 selectpicker。（这可能会有所帮助：learn.jquery.com/ajax/key-concepts）
感谢您的帮助 Chitrang。干杯

【解决方案2】：

你需要刷新选择器

<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>

【讨论】：

【解决方案3】：

或者这会有所帮助：

$('.selectpicker').selectpicker({ // your custom styles});

在 ajax 页面的末尾 (selectPHP.php)。

【讨论】：

这不能回答问题

【解决方案4】：

这会有所帮助。请检查您的 cdns 和选择器文件。如果您以编程方式添加选项，则需要在添加选项后刷新选择选择器。试试这个；

$('.selectpicker').selectpicker('refresh');

【讨论】：