2024年5月21日 星期二

[研究]ASP.NET, 套件 Select2.js 4.0.13 與 selectize 0.12.1 共存測試

[研究]ASP.NET, 套件 Select2.js 4.0.13 與 selectize 0.12.1 共存測試

2024-05-17

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

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

Default.aspx

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

<!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>
    <script type="text/javascript" src="Scripts/jquery-3.7.1.min.js"></script>

    <link href="Content/Selectize/css/selectize.css" rel="stylesheet" />
    <script type="text/javascript" src="Content/Selectize/js/standalone/selectize.min.js"></script>

    <link href="Content/css/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/select2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.selectizeCss').selectize();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
            SelectCommand="SELECT [Fruit] FROM [MyTable3]"></asp:SqlDataSource>

        <asp:DropDownList ID="DropDownList1" Width="150px" runat="server" AutoPostBack="True" 
            AppendDataBoundItems="True"
            DataSourceID="SqlDataSource1" DataTextField="Fruit" DataValueField="Fruit">
            <asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:DropDownList ID="DropDownList2" Width="150px" runat="server" AutoPostBack="True" 
            AppendDataBoundItems="True"
            DataSourceID="SqlDataSource1" DataTextField="Fruit" DataValueField="Fruit">
            <asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:DropDownList ID="DropDownList5" Width="150px" runat="server" AutoPostBack="True" 
            DataSourceID="SqlDataSource1" DataTextField="Fruit" DataValueField="Fruit">
        </asp:DropDownList>
        <br />
        <asp:DropDownList ID="DropDownList6" Width="150px" runat="server" AutoPostBack="True" 
            DataSourceID="SqlDataSource1" DataTextField="Fruit" DataValueField="Fruit">
        </asp:DropDownList>
        <br />
        <asp:DropDownList ID="DropDownList3" runat="server" Width="150px">
            <asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
            <asp:ListItem Text="選項1" Value="1"></asp:ListItem>
            <asp:ListItem Text="選項2" Value="2"></asp:ListItem>
            <asp:ListItem Text="選項3" Value="3"></asp:ListItem>
            <asp:ListItem Text="選項4" Value="4"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList4" runat="server" Width="150px">
            <asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
            <asp:ListItem Text="選項1" Value="1"></asp:ListItem>
            <asp:ListItem Text="選項2" Value="2"></asp:ListItem>
            <asp:ListItem Text="選項3" Value="3"></asp:ListItem>
            <asp:ListItem Text="選項4" Value="4"></asp:ListItem>
        </asp:DropDownList>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%= DropDownList1.ClientID %>').select2();
            $('#<%= DropDownList2.ClientID %>').selectize();
            $('#<%= DropDownList3.ClientID %>').select2();
            $('#<%= DropDownList4.ClientID %>').selectize();
            $('#<%= DropDownList5.ClientID %>').select2();
            $('#<%= DropDownList6.ClientID %>').selectize();
        });
    </script>
</body>
</html>

(下圖)結果1，乍看OK


(下圖)結果2，select2測試OK

(下圖)結果3，第4個下拉選單，沒有「關鍵字過濾」功能，也就是 selectize 套件至少要有一個選項，不是靠 DataSourceID 選出來的。

結論：看起來可以共存，但也就是 selectize 套件至少要有一個選項，不是靠 DataSourceID 選出來的，否則會沒有「關鍵字過濾」功能。例如下面：
        <asp:DropDownList ID="DropDownList2" Width="150px" runat="server" AutoPostBack="True" 
            AppendDataBoundItems="True"
            DataSourceID="SqlDataSource1" DataTextField="Fruit" DataValueField="Fruit">
            <asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
        </asp:DropDownList>

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

(完)

相關

於

沒有留言:

張貼留言