这是默认下拉单选无复选框无按钮列表代码(在WebAPP.NET框架中):
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ODWConnectionString_Live %>"
SelectCommand="SELECT DISTINCT ISNULL(NULLIF(CZF_ODW, 'NA'), 'Other') AS CZF_ODW FROM dbo.WebAppTestView;"></asp:SqlDataSource>
<td class="required" align="right" style="text-align: right;">
<span class="catchment">Catchment Zone:</span>
</td>
<td>
<asp:DropDownList ID="ddlField1" runat="server" CssClass="textfield" Width="200px" OnSelectedIndexChanged="ddlField1_SelectedIndexChanged" style="width: 182px; margin: 9px;"
DataSourceID="SqlDataSource3" DataTextField="CZF_ODW" DataValueField="CZF_ODW" AppendDataBoundItems="true">
<asp:ListItem Value="All"></asp:ListItem>
</asp:DropDownList>
</td>
</td>
需要将上面的下拉列表代码转换为带按钮的多选复选框下拉列表。
好吧,如果可能的话,使用列表框可以进行多项选择,但当然会占用更多的屏幕空间。
asp.net 中没有内置的多选组合框(DropDownList)。
因此,您可以采用第三方库。一个相当常见的选择是名为 select2 的 jQuery 插件。
下一个问题是 select2 加载项无法与 asp.net DropDownList 很好地配合,但如果您放入 HTML“select”元素,它确实可以正常工作。
事实证明 DropDownList 无论如何都是基于 HTML select 元素的。事实上,如果您使用 runat="server" 标记选择,那么您的功能与下拉列表非常相似。唯一缺少的功能是 autopostback="true"。而且你没有注意到你是否需要这种能力。
让我们构建一个示例,并假设我们需要组合框的自动回发。
为此,我们添加 JavaScript onchange 事件(客户端),然后只需单击表单上的按钮即可。该按钮(最终)应该用 style="display:none" 隐藏。
因此,我们的标记如下所示:
<div style="float: left">
<h4>Select Multiple Cites</h4>
<select id="DropDownList1" runat="server" clientidmode="static"
datatextfield="City"
multiple="true"
style="width: 500px"
onchange="mychange()">
</select>
<script>
function mychange() {
$('#Button1').click()
}
</script>
</div>
<div style="float: left; margin-left: 35px; margin-top: 40px">
<asp:Button ID="Button1" runat="server" Text="Show Hotels"
ClientIDMode="Static"
CssClass="btn"
OnClick="Button1_Click" />
</div>
<div style="clear: both; height: 20px"></div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" CssClass="table" Width="40%">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Description" HeaderText="Description" />
</Columns>
</asp:GridView>
<script>
$(document).ready(function () {
console.log("on page load select2 combo box setup")
$('#DropDownList1').select2()
});
</script>
我们背后的代码是这样的:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
LoadData()
End If
End Sub
Sub LoadData()
Dim rstHotels As DataTable
rstHotels = MyRst("SELECT City FROM tblHotels
WHERE City is not null
GROUP BY City")
DropDownList1.DataSource = rstHotels
DropDownList1.DataBind()
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs)
LoadGrid()
End Sub
Sub LoadGrid()
Dim strSQL As String =
"SELECT * FROM tblHotelsA"
Dim strWhere As String = ""
Dim cmdSQL As New SqlCommand()
Dim ParamCount As Integer = 0
Dim sP As String = ""
For Each MyPick As ListItem In DropDownList1.Items
Debug.Print($"Item = {MyPick.Text} selected = {MyPick.Selected}")
If MyPick.Selected Then
If strWhere <> "" Then strWhere &= ","
ParamCount += 1
sP = $"@P{ParamCount}"
strWhere &= sP
cmdSQL.Parameters.Add($"@P{ParamCount}", SqlDbType.NVarChar).Value = MyPick.Text
End If
Next
If strWhere <> "" Then
strSQL &= $" WHERE City IN ({strWhere}) "
End If
strSQL &= " ORDER BY HotelName"
cmdSQL.CommandText = strSQL
Dim dt As DataTable = MyRstP(cmdSQL)
GridView1.DataSource = dt
GridView1.DataBind()
End Sub
请注意,在上面,我们仍然使用 SQL 参数,因此代码不会受到潜在的 SQL 注入的影响。
当然,如果您不需要也不希望自动回发,那么您可以删除按钮以及附加到 select 元素的 onchange JavaScript 代码。