WebForms中如何用asp:ListItem实现带图片或复选框的文本选项

方案1：直接复用原有HTML结构（适配成本最低，推荐） #

原有Bootstrap风格的下拉结构不需要做大改，只需要新增服务端隐藏域存储选中值，加少量JS逻辑做值同步即可：

修改后的前端代码 #

<div class="dropdown">
   <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <img class="lazyload" data-src="./images/icons/usa.png">USA
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <h6 class="dropdown-header" href="#">Country</h6>
      <!-- 给每个下拉项加data-value属性存储要提交的实际值 -->
      <a class="dropdown-item" href="#" data-value="USA"><img class="lazyload" data-src="./images/icons/usa.png">USA</a>
      <a class="dropdown-item" href="#" data-value="UK"><img class="lazyload" data-src="./images/icons/great-britain.png">UK</a>
      <a class="dropdown-item" href="#" data-value="FR"><img class="lazyload" data-src="./images/icons/france.png">France</a>
      <a class="dropdown-item" href="#" data-value="ES"><img class="lazyload" data-src="./images/icons/spain.png">Spain</a>
      <a class="dropdown-item" href="#" data-value="DE"><img class="lazyload" data-src="./images/icons/germany.png">Germany</a>
   </div>
   <!-- 新增服务端隐藏域，用于提交选中值到后台 -->
   <asp:HiddenField ID="hfSelectedCountry" runat="server" />
</div>

同步选中值的JS代码 #

$('.dropdown-item').click(function(e) {
  e.preventDefault();
  // 读取选中项的值和展示内容
  const selectedVal = $(this).data('value');
  const selectedContent = $(this).html();
  // 更新下拉按钮的展示内容
  $('#dropdownMenuButton').html(selectedContent);
  // 将选中值写入隐藏域
  $('#<%= hfSelectedCountry.ClientID %>').val(selectedVal);
});

后台取值 #

直接读取隐藏域的Value属性即可拿到选中值：

string selectedCountry = hfSelectedCountry.Value;

如果是带复选框的多选下拉，逻辑完全一致：给每个下拉项加复选框，选中时把所有勾选的值用逗号拼接后写入隐藏域，后台拆分字符串即可拿到所有选中项。
如果需要服务端动态绑定下拉选项，直接用Repeater控件绑定数据源生成.dropdown-item节点即可，不需要修改整体结构。

方案2：基于asp:DropDownList实现带自定义内容的下拉 #

如果必须使用服务端下拉控件，可以给ListItem添加自定义属性存储图片路径/复选框标识，再用前端下拉渲染插件把原生select转成符合你样式要求的下拉：

服务端控件代码 #

<asp:DropDownList CssClass="custom-dropdown" ID="ddCountry" runat="server" AutoPostback="False">
    <asp:ListItem Text="USA" Value="USA" data-img="./images/icons/usa.png" />
    <asp:ListItem Text="UK" Value="UK" data-img="./images/icons/great-britain.png" />
    <asp:ListItem Text="France" Value="FR" data-img="./images/icons/france.png" />
</asp:DropDownList>

前端调用下拉渲染插件，读取每个option的自定义属性渲染成带图片/复选框的下拉，样式可以和你现有CSS类完全对齐。

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