[研究]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 ,實際測試不行。
(完)
相關
沒有留言:
張貼留言