2024年5月9日 星期四

[研究]ASP.NET,WebForm,試用 Bootstrap Select 1.13.18件，下拉選單關鍵字過濾顯示

[研究]ASP.NET,WebForm,試用 Bootstrap Select 1.13.18套件，下拉選單關鍵字過濾顯示

2024-05-06

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

********************************************************************************

https://github.com/selectize/selectize.js
授權 Apache-2.0


WebApplication1

正在安裝:

jQuery.1.9.1
bootstrap.3.0.0
bootstrap-select.1.13.18

********************************************************************************

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <%--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.3/css/bootstrap.min.css">--%>
    <%--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/css/bootstrap.min.css">--%>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <%--<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>--%>
    <%--<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>--%>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.selectpicker').selectpicker();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
            <asp:DropDownList ID="DropDownList1" runat="server" CssClass="selectpicker" AutoPostBack="true">
                <asp:ListItem>Option 1</asp:ListItem>
                <asp:ListItem>Option 2</asp:ListItem>
                <asp:ListItem>Option 3</asp:ListItem>
            </asp:DropDownList>
    </form>
</body>
</html>


Bootstrap 5.3.3 和4.6.2 版測試有問題

Bootstrap 3.4.1 版測試有問題

********************************************************************************

Default2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="WebApplication1.Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.selectpicker').selectpicker();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <select id="ddlOptions" class="selectpicker" data-live-search="true" runat="server">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
            </select>
        </div>
    </form>
</body>
</html>

測試正常

表示 jQuery、bootstrap、bootstrap-select.要某些版本組合才可正常運作。

而 bootstrap-select 1.13.18 說只要 jQuery >= 1.9.1 && < 4.0.0 和 bootstrap >= 3.0.0 ，實際測試不行。


(完)

相關

於

沒有留言:

張貼留言