浮雲雅築: [研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(二)各種ID存取狀況

[研究][ASP.NET]Select2 v4.0.3 讓 HTML select 與 ASP.NET DropDownList 等下拉選單可以輸入關鍵字，即時過濾顯示下拉選項

2022-05-09

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

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

若 DropDownList 沒有在任何 Control ( GridView, FormView, DetailsView ..) 之中，也不在 Master Page 中

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 href="Content/css/select2.css" rel="stylesheet" />
    <%--jQuery.js 必須在 select.js 之前--%>
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="Scripts/select2.js"></script>
    <%--利用 class 或 CssClass 使用 select2 方式--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class").select2();
        });
    </script>
    <%--利用 id 使用 select2 方式--%>
    <script type="text/javascript">
        $(function () {
            $("[id$='DropDownList2']").select2();
        });
    </script>
    <%--利用 ClientID 使用 select2 方式--%>
    <script type="text/javascript">
        $(function () {
            $("#<%= DropDownList3.ClientID %>").select2();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList ID="DropDownList1" CssClass="Select2Class" runat="server">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem>apple</asp:ListItem>
            <asp:ListItem>banana</asp:ListItem>
            <asp:ListItem>pineapple</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem>apple</asp:ListItem>
            <asp:ListItem>banana</asp:ListItem>
            <asp:ListItem>pineapple</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList3" runat="server">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem>apple</asp:ListItem>
            <asp:ListItem>banana</asp:ListItem>
            <asp:ListItem>pineapple</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList4" CssClass="Select2Class2" runat="server">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem>apple</asp:ListItem>
            <asp:ListItem>banana</asp:ListItem>
            <asp:ListItem>pineapple</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList5" runat="server">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem>apple</asp:ListItem>
            <asp:ListItem>banana</asp:ListItem>
            <asp:ListItem>pineapple</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList6" runat="server">
            <asp:ListItem></asp:ListItem>
            <asp:ListItem>apple</asp:ListItem>
            <asp:ListItem>banana</asp:ListItem>
            <asp:ListItem>pineapple</asp:ListItem>
        </asp:DropDownList>
    </form>
    <%--select2 相關 JavaScript 寫在之後也可--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class2").select2();
        });
    </script>
        <script type="text/javascript">
            $(function () {
                $("[id$='DropDownList5']").select2();
            });
        </script>
    <script type="text/javascript">
        $(function () {
            $("#<%= DropDownList6.ClientID %>").select2();
        });
    </script>
</body>
</html>

補：以100%寬度顯示，或其他寬度顯示

    <script type="text/javascript">

        $(document).ready(function () {
            $(".Select2Class2").select2({width:"100%"});
        });

執行結果

(下圖)輸入 ap，即時過濾僅顯示包含該字串的選項

HTML Source

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title><link href="Content/css/select2.css" rel="stylesheet" />
    
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="Scripts/select2.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class").select2();
        });
    </script>
    
    <script type="text/javascript">
        $(function () {
            $("[id$='DropDownList2']").select2();
        });
    </script>
    
    <script type="text/javascript">
        $(function () {
            $("#DropDownList3").select2();
        });
    </script>
</head>
<body>
    <form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
value="OHxEmZpaoBBZkUgXxuT0kLMv420etYLFmJPgy8Dvee/tsuE81y/111yGdT3j3/PYGgcoSeks2GVk1
Fb7XQKM8I04HEpTjEOU0dSNXtJGIt0=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
  value="WhMMoY8XaSMcxju20LwSlXVpBtiTpergaYx7h7ONEkJzJSCq3jyLxwFjhRwYowY6enG5xtxNb
ANP1syedu3oPgb8oDN1uP4w46jaIr6XhJDuiA1BJw5eWwAol56UtkCRm3q9dgUDBqRaP8IA7TtugHUeGRd
+wpmmN8h0n2rWaCbQkX0AiUY1ZpCcCK96Wh9yQe0bDhcS2CNhek+eAlXHnmu6uvS06a9Q0NKLJBVmIxqFr
Dx1ogZsBdG8a0WjxAkgkzvlreo5o4DT36pFvLKQa4/4S6cvmtAJ/nvSnGeXJrtaej9rF31dC3ItxqMmIdc
6iXKoJLmVhsb2ERhQvvQ3nUTLnbsueSx2uMQBzdkp2gpDjq0kkUUzqcZuqmzLngqKHX1j14D6VPG43tYkJ
kHO1DbbzKTxGoYucGdoWR0zzf7QPLlQBV7JFy/jJQh16LcwQtDfSig/aMaL0vI/jXI/TwV/Ew8Mh+XIhxZ
4wOU4kzJCquFJO8BXCXVd6F3stFZrbdRsVvUuX6IrAgVmaSTUMA8cxCrciclFhVb5Ny2TszONr67mgrbhP
6LnAywRGfGS/GDKMDvZevV8M3wKB3/kUgbjHYzqw67dtz/vvPUYmGU=" />
</div>
        <select name="DropDownList1" id="DropDownList1" class="Select2Class">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
        <select name="DropDownList2" id="DropDownList2">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
        <select name="DropDownList3" id="DropDownList3">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
        <select name="DropDownList4" id="DropDownList4" class="Select2Class2">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
        <select name="DropDownList5" id="DropDownList5">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
        <select name="DropDownList6" id="DropDownList6">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    </form>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class2").select2();
        });
    </script>
        <script type="text/javascript">
            $(function () {
                $("[id$='DropDownList5']").select2();
            });
        </script>
    <script type="text/javascript">
        $(function () {
            $("#DropDownList6").select2();
        });
    </script>
</body>
</html>

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

若 DropDownList 在 Control ( GridView, FormView, DetailsView ..) 之中

例如包在 DetailsView1 中，則 DropDownList2 的 HTML Source 中 id 和 name 會變化，並非原來的 id="DropDownList2"，且 id 和 name 會不一致，name 用 $，id 用 _

name="DetailsView1$DropDownList2"

id="DetailsView1_DropDownList2"

另外 ClientID 的方式無法使用。

**********

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 href="Content/css/select2.css" rel="stylesheet" />
    <%--jQuery.js 必須在 select.js 之前--%>
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="Scripts/select2.js"></script>
    <%--利用 class 或 CssClass 使用 select2 方式--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class").select2();
        });
    </script>
    <%--利用 id 使用 select2 方式--%>
    <script type="text/javascript">
        $(function () {
            $("[id$='DropDownList2']").select2();
        });
    </script>
    <%--利用 ClientID 使用 select2 方式--%>
    <%--編譯錯誤
    描述: 資源編譯無法完成 (錯誤發生於服務要求)。請檢閱下列的特定錯誤詳細資料，並視情況修改您的原始程式碼。
    編譯器錯誤訊息: CS0103: The name 'DropDownList3' does not exist in the current context
    <script type="text/javascript">
        $(function () {
            $("#<%= DropDownList3.ClientID %>").select2();
        });
    </script>--%>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:TestDBConnectionString %>" 
            DeleteCommand="DELETE FROM [Fruits] WHERE [SN] = @SN" 
            InsertCommand="INSERT INTO [Fruits] ([FruitName]) VALUES (@FruitName)" 
            SelectCommand="SELECT * FROM [Fruits]" 
            UpdateCommand="UPDATE [Fruits] SET [FruitName] = @FruitName WHERE [SN] = @SN">
            <DeleteParameters>
                <asp:Parameter Name="SN" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="FruitName" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="FruitName" Type="String" />
                <asp:Parameter Name="SN" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="600px"
            DefaultMode="Insert"
            AllowPaging="True" AutoGenerateRows="False" DataKeyNames="SN" DataSourceID="SqlDataSource1">
            <Fields>
                <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False" ReadOnly="True" SortExpression="SN" />
                <asp:TemplateField HeaderText="FruitName" SortExpression="FruitName">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FruitName") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <%--<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FruitName") %>'></asp:TextBox>--%>
                        <asp:DropDownList ID="DropDownList1" CssClass="Select2Class" runat="server">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem>apple</asp:ListItem>
                            <asp:ListItem>banana</asp:ListItem>
                            <asp:ListItem>pineapple</asp:ListItem>
                        </asp:DropDownList>
                        <asp:DropDownList ID="DropDownList2" runat="server">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem>apple</asp:ListItem>
                            <asp:ListItem>banana</asp:ListItem>
                            <asp:ListItem>pineapple</asp:ListItem>
                        </asp:DropDownList>
                        <asp:DropDownList ID="DropDownList3" runat="server">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem>apple</asp:ListItem>
                            <asp:ListItem>banana</asp:ListItem>
                            <asp:ListItem>pineapple</asp:ListItem>
                        </asp:DropDownList>
                        <asp:DropDownList ID="DropDownList4" CssClass="Select2Class2" runat="server">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem>apple</asp:ListItem>
                            <asp:ListItem>banana</asp:ListItem>
                            <asp:ListItem>pineapple</asp:ListItem>
                        </asp:DropDownList>
                        <asp:DropDownList ID="DropDownList5" runat="server">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem>apple</asp:ListItem>
                            <asp:ListItem>banana</asp:ListItem>
                            <asp:ListItem>pineapple</asp:ListItem>
                        </asp:DropDownList>
                        <asp:DropDownList ID="DropDownList6" runat="server">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem>apple</asp:ListItem>
                            <asp:ListItem>banana</asp:ListItem>
                            <asp:ListItem>pineapple</asp:ListItem>
                        </asp:DropDownList>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("FruitName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True" />
            </Fields>
        </asp:DetailsView>

    </form>
    <%--select2 相關 JavaScript 寫在之後也可--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class2").select2();
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $("[id$='DropDownList5']").select2();
        });
    </script>
    <%--編譯錯誤
    描述: 資源編譯無法完成 (錯誤發生於服務要求)。請檢閱下列的特定錯誤詳細資料，並視情況修改您的原始程式碼。
    編譯器錯誤訊息: CS0103: The name 'DropDownList6' does not exist in the current context
    <script type="text/javascript">
        $(function () {
            $("#<%= DropDownList6.ClientID %>").select2();
        });
    </script>--%>
</body>
</html>

執行結果

HTML Source 內容

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title><link href="Content/css/select2.css" rel="stylesheet" />
    
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="Scripts/select2.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class").select2();
        });
    </script>
    
    <script type="text/javascript">
        $(function () {
            $("[id$='DropDownList2']").select2();
        });
    </script>
    
    
</head>
<body>
    <form method="post" action="./Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="roG/mIhon41LFr
ONCNGaGQ2mumLin12JfRq/pQNolBGdVRybHOoYaRuCECBoWUAHgwZNSsQDWpKsBijdKRRANkll7U6
CEYx8eNasL0TsA/NMBrelglpGztjjCqTsjlkynQ23EXkCRom/ItTPWfirzEO0fnu6qlwQchkTebyK
MHIbl1X+ZVhAKH4ONZqEH5env4MzhbU9Wlo5hTStAS2ZAK3zRcZm7BfbcOqSWzxJd/tgZflNJWVs8
sarhFktxu+yaXPMnskfCBLsTIde7t93pi40cnU+M9kpzMJbsUPSkMap9FfNAnlkhDY8jU/qQcqFv
on4I1DO51McBKENaLPk6E5GwPXX7M/wrrA+Aqwl9jDR//Dze5aPXUp38uEzORT8ldE6TGB79fGw//Pq0Cu0aA==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="9BD98A7D" />
	<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" 
value="uiT1lYtYX2vFcRcxpGYsLuLWRql88x8u7ZO2cs5k6pakLtZVdUr65ilbWfAdBVDRSVaa
P4eYWZVQDvs4VXkygx5A7ODZNlaM6u7N/B10X0eu7VOq2iNE6U5r0ozZ7msaBOgfb4sy/Sv+irZqu
+ftY45qqi+xT9vkSnXVKm4gjp3m4hsTtx+WqWKtcZbpG+X2G07mrXJIgrvj3n0r7YtkSLRxVun6GKzS
7VCjutmhpPNpX48wk9aqtqpUYs0gItP7xQ7LIBT/hHfqoHp6ERKIZGOwwpwgw6UmFaqV8ibd9cFt56
68OXSZggi8sVq3EBMhVBLMLcMbm8Xa7nYdp6xD8fwnksg/FJu/bNzF8EREMZQaZ2nHC4QuyCAGQ3aJ
Uou3HiVptjKVh+gWkA9MymKVdPI95eNHaf1Mte1IOHeG3JdvHOajqxJfrtSOiM9qjd8xXTh1fCMLFVr
JDY02Dk5i5P4QapDDE6YH57KP/GAptuZ0a+nrUQOI6bEK14qOzGzK4U8LfhrsZYPMMH/0IJaCKfsAZH
atqmC81L17JwjNP82EDa6eZZE3i+a8tq23uxkE4s59dzQrIqXyCjpsimvxjrpPMTNCjBGfTyBBha+GIi
/t4XNlIRnYHh4C93HLdwtYkGwJkmo8ZXo/0lByxLt4UA==" />
</div>
        
        <div>
	<table cellspacing="0" rules="all" border="1" id="DetailsView1" style="height:50px;width:600px;border-collapse:collapse;">
		<tr>
			<td>FruitName</td><td>
                        
                        <select name="DetailsView1$DropDownList1" id="DetailsView1_DropDownList1" class="Select2Class">
				<option value=""></option>
				<option value="apple">apple</option>
				<option value="banana">banana</option>
				<option value="pineapple">pineapple</option>

			</select>
                        <select name="DetailsView1$DropDownList2" id="DetailsView1_DropDownList2">
				<option value=""></option>
				<option value="apple">apple</option>
				<option value="banana">banana</option>
				<option value="pineapple">pineapple</option>

			</select>
                        <select name="DetailsView1$DropDownList3" id="DetailsView1_DropDownList3">
				<option value=""></option>
				<option value="apple">apple</option>
				<option value="banana">banana</option>
				<option value="pineapple">pineapple</option>

			</select>
                        <select name="DetailsView1$DropDownList4" id="DetailsView1_DropDownList4" class="Select2Class2">
				<option value=""></option>
				<option value="apple">apple</option>
				<option value="banana">banana</option>
				<option value="pineapple">pineapple</option>

			</select>
                        <select name="DetailsView1$DropDownList5" id="DetailsView1_DropDownList5">
				<option value=""></option>
				<option value="apple">apple</option>
				<option value="banana">banana</option>
				<option value="pineapple">pineapple</option>

			</select>
                        <select name="DetailsView1$DropDownList6" id="DetailsView1_DropDownList6">
				<option value=""></option>
				<option value="apple">apple</option>
				<option value="banana">banana</option>
				<option value="pineapple">pineapple</option>

			</select>
                    </td>
		</tr><tr>
			<td colspan="2"><a href="javascript:__doPostBack(&#39;DetailsView1$ctl02&#39;,&#39;&#39;)">插入</a>
&nbsp;<a href="javascript:__doPostBack(&#39;DetailsView1&#39;,&#39;Cancel$-1&#39;)">取消</a></td>
		</tr>
	</table>
</div>

    </form>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class2").select2();
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $("[id$='DropDownList5']").select2();
        });
    </script>
    
</body>
</html>

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

若 DropDownList 在 Master Page 的 Content Place Holder 中

Site1.Master

<%@ Master Language="C#" AutoEventWireup="true" 
    CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/css/select2.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="Scripts/select2.js"></script>
    <%--利用 class 或 CssClass 使用 select2 方式--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class").select2();
        });
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

WebForm1.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" 
    AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
    Inherits="WebApplication1.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%--利用 class 或 CssClass 使用 select2 方式--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class3").select2();
        });
    </script>
    <%--利用 id 使用 select2 方式--%>
    <script type="text/javascript">
        $(function () {
            $("[id$='DropDownList2']").select2();
        });
    </script>
    <%--利用 ClientID 使用 select2 方式，會依據 ID 變化自動改名 --%>
    <script type="text/javascript">
        $(function () {
            $("#<%= DropDownList3.ClientID %>").select2();
        });
    </script>
    <%--直接使用 HTML Source 看到的 ID--%>
    <script type="text/javascript">
        $(function () {
            $("[id$='ContentPlaceHolder1_DropDownList4']").select2();
        });
    </script>
    <%--編譯錯誤
    描述: 資源編譯無法完成 (錯誤發生於服務要求)。請檢閱下列的特定錯誤詳細資料，並視情況修改您的原始程式碼。
    編譯器錯誤訊息: CS1056: Unexpected character '$'
    <script type="text/javascript">
        $(function () {
            $("#<%= ctl00$ContentPlaceHolder1$DropDownList6A.ClientID %>").select2();
        });
    </script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    DropDownList1,　　1A,　　　　2,　　　　3,　　　　4<br />
    <asp:DropDownList ID="DropDownList1" CssClass="Select2Class" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList1A" CssClass="Select2Class3" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList2" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList3" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList4" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList5" ClientIDMode="AutoID" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList6" ClientIDMode="Inherit" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList7" ClientIDMode="Predictable" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList8" ClientIDMode="Static" runat="server">
        <asp:ListItem></asp:ListItem>
        <asp:ListItem>apple</asp:ListItem>
        <asp:ListItem>banana</asp:ListItem>
        <asp:ListItem>pineapple</asp:ListItem>
    </asp:DropDownList>
</asp:Content>

執行結果

HTML Source

 

<!DOCTYPE html>

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title><link href="Content/css/select2.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="Scripts/select2.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class").select2();
        });
    </script>
    
    
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class3").select2();
        });
    </script>
    
    <script type="text/javascript">
        $(function () {
            $("[id$='DropDownList2']").select2();
        });
    </script>
    
    <script type="text/javascript">
        $(function () {
            $("#ContentPlaceHolder1_DropDownList3").select2();
        });
    </script>
    
    <script type="text/javascript">
        $(function () {
            $("[id$='ContentPlaceHolder1_DropDownList4']").select2();
        });
    </script>
    
</head>
<body>
    <form method="post" action="./WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
value="0cdHV7tvoPkp9VWJHF287wDNBTbbGyxtwC38Em4xGtcD4TA1W7kuBorc3lfv/Xzs4dmoJl2+kv5xaEc
OMXmLEVASGFwiRdK7IGW40vOxNfg=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="B6E7D48B" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" 
value="4VKVRHcxag3pw2XdIkJQmHc5GL4gvV7kNYigaWSrc2lNH7+UVnvDcfzgjhs0a2WeJLPxjfriZeWJ14dbB
AcvJaBqvW7pk1GkRF3pz4q6xA/OFfPdMKVG0oRuuc/tCFzvZvf01f7C0ye+deUp7F8fc4WrV85Y8mJOiRsv1v1SP
PRVjSIPy7COmKmn7upFg5b3g5rXwEBvSGcro3YXtZMpSt01A9CaqliEnCaGocC0PIOsUXodMpie01Xzy1YGSVCZX
4JZEvrLiggNE9LBzvbJ8o6pBrBlngcLtC0zaRIQVi1hxDRbQXo0noEXR9Yvst2TxZW6U5DqGB4AAlnEmO0PdeuJp
EFUSfP1Qsr4PtltfGNmcdohHRu6DQdGVq092TpAVHN7PeOfiEn2A3/7b5TKnXBygfQTd36izgK9X5SeHgUJ0VIfE
z3t17/P3lwRb0ov+/Gyi7lr7NdE1BgL/kqimKx8j1B5aYoB58wVdItg2dF56zj0uWM+vVoRRg8XQandAeMa4Ubtu
i/4QwbBiaHjRaPfrgFS71wWdBLKhBeSTIzpnbeQZF2dalMPgYWmd2uMQaMnTMVHLsi0dT3vXlDRfDPAK3k3XLNbt
qOk9AsICFUQlO8MaUTcfKqj1BEwuDaErYBkaZs5aofUlM4TqGTTfeLVJJg2uQ97bsPrOrEiEtcQ2OzJ8k+7vHuDa
dlJRqDkrWb8WXRt+gWRKfUXf3ecdREv3qs5zX5shQquPMTwdGdkDvBB4FhRJF3I9Qc9Dc2C52awMfS+Yp/A+zSAND9Nfec6fUejFG
0atGyNMSw4OMeGFgbTYCgs1OVb1+N7wlxVaNO/qs7Wb/avMAsKMHGbrEm+/Mrsmee40tUXFe1v//E="      />
</div>
        <div>
            
    DropDownList1,　　1A,　　　　2,　　　　3,　　　　4<br />
    <select name="ctl00$ContentPlaceHolder1$DropDownList1" id="ContentPlaceHolder1_DropDownList1" class="Select2Class">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    <select name="ctl00$ContentPlaceHolder1$DropDownList1A" id="ContentPlaceHolder1_DropDownList1A" class="Select2Class3">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    <select name="ctl00$ContentPlaceHolder1$DropDownList2" id="ContentPlaceHolder1_DropDownList2">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    <select name="ctl00$ContentPlaceHolder1$DropDownList3" id="ContentPlaceHolder1_DropDownList3">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    <select name="ctl00$ContentPlaceHolder1$DropDownList4" id="ContentPlaceHolder1_DropDownList4">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    <select name="ctl00$ContentPlaceHolder1$DropDownList5" id="ctl00_ContentPlaceHolder1_DropDownList5">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    <select name="ctl00$ContentPlaceHolder1$DropDownList6" id="ContentPlaceHolder1_DropDownList6">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    <select name="ctl00$ContentPlaceHolder1$DropDownList7" id="ContentPlaceHolder1_DropDownList7">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>
    <select name="ctl00$ContentPlaceHolder1$DropDownList8" id="DropDownList8">
	<option value=""></option>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="pineapple">pineapple</option>

</select>

        </div>
    </form>
</body>
</html>

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

Control.ClientID 屬性

Control.ClientID 屬性 (System.Web.UI) | Microsoft Docs

https://docs.microsoft.com/zh-tw/dotnet/api/system.web.ui.control.clientid?view=netframework-4.8

值	描述
AutoID	ClientID 值是透過串連每個父命名容器的 ID 值與控制項的 ID 值產生。在呈現控制項之多個執行個體的資料繫結情節中，遞增值會插入控制項之 ID 值的前面。各區段是以底線字元 (_) 分隔。此演算法用於早于 ASP.NET 4 的 ASP.NET 版本。
Static	ClientID 值設定為 ID 屬性的值。如果控制項是命名容器，則對於其包含的所有控制項而言，會用來做為命名容器之階層架構的最上層。
Predictable	這個演算法用於資料繫結控制項中的控制項。 ClientID 值是透過串連父命名容器的 ClientID 值與控制項的 ID 值產生。如果控制項是資料繫結控制項，並且會產生多個資料列，則 ClientIDRowSuffix 屬性中指定之資料欄位的值會加入結尾處。針對 GridView 控制項，可以指定多個資料欄位。 ClientIDRowSuffix如果屬性是空白的，則會在結尾加入序號，而不是資料欄值。各區段是以底線字元 (_) 分隔。
Inherit	此控制項會繼承其 ClientIDMode 控制項的 NamingContainer 設定。

頁面的 ClientIDMode 預設值為 Predictable 。控制項的 ClientIDMode 預設值為 Inherit 。因為控制項的預設值是 Inherit ，所以預設產生模式為 Predictable 。不過， (如果您使用 Visual Studio 將 Web 專案轉換為舊版的 ASP.NET 4，Visual Studio會自動將網站預設值 AutoID 設定為 Web.config file.)

ASP.NET Web Server Control Identification | Microsoft Docs

https://docs.microsoft.com/zh-tw/previous-versions/1d04y8ss(v=vs.140)

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

結論

使用 HTML 的 class 或 APS.NET Control 的 CssClass 用 style 方式來設定，可以避免 ID 變化的問題，不然就要使用 ClientIDMode="Static" 方式。

實際經驗，使用 HTML Source 的 id、ClientIDMode、ClientID 的方始有時不如預期，會失效，不確定受甚麼影響(沒有花時間好好研究分析)，用 class / CssClass 目前正常。

(完)

相關

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(二)各種ID存取狀況

https://shaurong.blogspot.com/2022/05/aspnetselect2-v403-id.html

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(一)初次試用

http://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html

浮雲雅築

2022年5月9日星期一

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(二)各種ID存取狀況

沒有留言:

張貼留言

2022年5月9日 星期一

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(二)各種ID存取狀況

沒有留言:

張貼留言

2022年5月9日星期一