在 ASP.NET Web 应用程序中单击时 Bootstrap-select 不会下拉

问题描述 投票：0回答：2

我正在构建一个 ASP.NET Web 应用程序，但在让 

bootstrap-select
正常工作时遇到严重困难。

我看过其他关于此问题的帖子，似乎没有什么可以解决这个问题，所以我希望今天能得到一些帮助。

Web 应用程序使用母版页，其中包含以下声明以包含所有 CSS 和 JavaScript 文件：

<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>MCTC - <%=Page.Title%></title>
    <link href="../Content/styles.css" rel="stylesheet" /> <!-- Bootstrap CSS -->
    <link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" /> <!-- jQuery-UI CSS -->
    <link href="../Content/bootstrap-select.css" rel="stylesheet" /> <!-- Bootstrap-select CSS -->
    <link href="../content/bootstrap-datepicker3.css" rel="stylesheet"/> <!-- Bootstrap-datepicker CSS -->
    <link href="../content/mctc_styles.css" rel="stylesheet" /> <!-- custom site CSS -->
    <script src="../../scripts/jquery-3.6.0.min.js"></script>
    <script src="../../scripts/bootstrap.bundle.min.js"></script>
    <script src="../../scripts/bootstrap-select.js"></script>
    <script src="../../scripts/jquery-ui-1.13.1.js"></script>
    <script src="../../scripts/bootstrap-datepicker.js"></script>
</head>

在内容页面中，我有一个 

bootstrap-select
，旨在显示使用 
AJAX
调用检索的产品类别列表。 
bootstrap-select
的 HTML 如下：

        <div class="row mb-4">
            <div class="col-lg-10 offset-lg-1 text-center">
                <select class="selectpicker" id="ddlCategories" name="ddlCategories">
                    <option value="">Choose</option>
                </select>
           </div>
        </div>

在

$(document).ready(function () {
脚本部分的末尾，我有以下两行与
bootstrap-select
相关的代码：

$('#ddlCategories').selectpicker();
loadCategories();

对 

loadCategories()
的调用使用以下代码进行 
AJAX
调用以从数据库中检索类别记录列表。这是代码：

        function loadCategories() {
            $.ajax({
                url: 'getcategories.ashx',
                data: null,
                method: 'post',
                dataType: 'json',
                    success: function(response) {
                        $('#ddlCategories').empty();
                        for (var i = 0; i < response.length; i++) {
                            alert(response[i].Category_ID + '='+response[i].Title);
                            $('#ddlCategories').append("<option value='" + response[i].Category_ID + ">" + response[i].Title + "</option>");
                        }
                        $('#ddlCategories').selectpicker('refresh'); // without the []
                },
                error: function (e) {
                    console.log(e.responseText);
                }
            });
        }

我添加了对 

alert
的调用，以确保返回数据，事实确实如此。

当我执行此代码时，屏幕上显示的是以下内容：

我在控制台窗口中没有收到任何错误或消息，所以我不知道问题是什么，但单击 

bootstrap-select
控件没有任何反应 - 它不会下拉，也不会显示数据。无论发生什么，它都会默默地失败。 我想这可能与我在母版页中加载 Javascript 和 CSS 文件的顺序有关，并且我已经遵循了我能找到的每个示例，但它似乎仍然不起作用。

我们将非常感谢您提供的任何帮助。

javascript asp.net twitter-bootstrap bootstrap-5 bootstrap-select
2个回答
0
投票

对此问题的简短回答是 bootstrap-select 不适用于 Bootstrap 5。当我退回到版本 4.1.3 时，它现在可以工作。 希望这个问题很快就能解决。

0
投票

这是一个版本问题，直到今天为止一直为我工作的版本组合。

[电子邮件受保护] [电子邮件受保护]

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.