在ASP.NETWeb應用程式中單擊時，引導選擇不會下拉-有解無憂

我正在構建一個 ASP.NET Web 應用程式，但無法bootstrap-select正常作業。

我已經查看了關于 SO 的其他帖子，但似乎沒有任何問題可以解決這個問題，所以我希望我今天能得到一些幫助。

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呼叫檢索的產品類別串列。的 HTMLbootstrap-select如下：

        <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確保資料正在被回傳，并且確實如此。

當我執行此代碼時，我在螢屏上看到的內容如下：

在 ASP.NET Web 應用程式中單擊時，引導選擇不會下拉

我在控制臺視窗中沒有收到任何錯誤或訊息，所以我不知道問題出在哪里，但是單擊bootstrap-select控制元件什么也沒做 - 它不會下拉，也不會顯示資料。無論發生什么，它都會默默地失敗。我想這可能與我在母版頁中加載 Javascript 和 CSS 檔案的順序有關，并且我已經按照我能找到的每個示例進行操作，但它似乎仍然不起作用。

任何可以提供的幫助將不勝感激。

uj5u.com熱心網友回復：

對此的簡短回答是 bootstrap-select 不適用于 Bootstrap 5。當我回歸到 4.1.3 版時，它現在可以作業了。希望這很快就能解決。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/495346.html

標籤：javascript 网推特引导引导程序 5 引导选择

上一篇：CSS：如何微調col-sm-X類的斷點

下一篇：表格延伸到螢屏外