如何获取ASP.NET场景下multiselect div中已选中的option值

你当前的代码将option标签嵌套在div容器中，ASP.NET后端无法直接识别这类非表单控件的选中状态，按以下步骤修改即可实现后端遍历选中值：

第一步：修改aspx页面结构 #

把原来包裹option的div替换为带runat="server"属性的多选select控件，如果你用的是前端JS渲染的自定义多选组件，可以额外加一个隐藏域同步选中值，修改后代码如下：

<div class="multiselect" id="lblMultiSelect" runat="server" multiple="multiple" data-target="multi-0">
    <div class="title noselect">
        <span class="text">Select</span>
        <span class="close-icon">&times;</span>
        <span class="expand-icon">&plus;</span>
    </div>
    <!-- 把原来的div.container替换为select标签，保留runat属性，不需要显示可以设为隐藏 -->
    <select class="container" runat="server" id="yearSelect" multiple="multiple" style="display:none;">
      <% For v As Integer = 0 To Years_dt.Rows.Count - 1 %>
         <% Dim selectedYear As String %>
             <% selectedYear = Years_dt.Rows(v).Item("COLUMN_NAME")%>
                 <option style="color:black;" value="<%=selectedYear %>" >                                                          
                    <%=selectedYear %> </option>
                  <%Next %>
          </select>
</div>
<!-- 自定义JS渲染的多选组件需要加这个隐藏域，用来同步选中值到后端 -->
<asp:HiddenField ID="hidSelectedYears" runat="server" />

第二步：前端同步选中状态（仅自定义JS组件需要） #

如果你的multiselect组件没有和原生select自动同步选中状态，在组件的选中/取消选中事件回调里添加逻辑，把选中值用逗号分隔存入隐藏域：

// 示例代码，根据你实际使用的组件API调整取值逻辑
const selectedValueList = 你的多选组件获取选中值的方法();
document.getElementById('<%=hidSelectedYears.ClientID%>').value = selectedValueList.join(',');

第三步：VB后端遍历选中值 #

两种实现方式对应两种取值逻辑：

• 方式1：直接读取原生select的选中项

' 遍历select控件所有选项，筛选选中项
For Each item As ListItem In yearSelect.Items
    If item.Selected Then
        ' item.Value就是当前选中的年份值，此处添加你的业务逻辑
        Dim curSelectedYear As String = item.Value
    End If
Next

• 方式2：读取隐藏域同步的选中值

If Not String.IsNullOrEmpty(hidSelectedYears.Value) Then
    ' 拆分逗号分隔的选中值数组
    Dim selectedYearArr As String() = hidSelectedYears.Value.Split(",")
    For Each year As String In selectedYearArr
        ' 遍历每一个选中的年份，此处添加你的业务逻辑
    Next
End If

内容的提问来源于stack exchange，提问作者Reem Elshenawy