在 c#.net 的下拉列表项中动态加载带有文本的下拉列表并附加带有文本的图像答案

【问题标题】：Dynamically load dropdown with text and attach image with text in dropdown list item in c#.net在 c#.net 的下拉列表项中动态加载带有文本的下拉列表并附加带有文本的图像
【发布时间】：2026-01-02 01:20:08
【问题描述】：

我正在从数据库中获取数据源并将其添加到下拉列表中，但是我想在列表项中添加图像。我试过下面的代码

  DataTable dt = ds.Tables[0];

                for (int count = 0; count < dt.Rows.Count; count++)
                {
                    String status;

                    if (dt.Rows[count]["status"].ToString() == "True")
                    {
                        status = "<img src='online.jpg'/>";

                    }
                    else
                    {
                         status = "<img src='online.jpg'/>";

                    }
                    dt.Rows[count]["SubCampaignName"] = dt.Rows[count]["SubCampaignName"] + " -    " + status;
                }

                SkillsStatusddl.DataSource = dt;
                SkillsStatusddl.DataTextField = "SubCampaignName";
                SkillsStatusddl.DataValueField = "SubCampaignId";
                SkillsStatusddl.CssClass = "";
                SkillsStatusddl.DataBind();

但不是附加图像，而是在下拉列表项中打印“”

【问题讨论】：

附带说明：您应该考虑使用foreach 循环遍历IEnumerable 对象。

标签： c# asp.net

【解决方案1】：

我的解决方案

我认为使用插件，但速度快，所有浏览器支持和良好的社区。我使用引导 css、js 和引导选择插件 - https://silviomoreto.github.io/bootstrap-select/examples/

我的示例代码

后端代码：

    ListItem list = new ListItem();
    list.Value="1";
    list.Text="1";
    list.Attributes.Add("data-icon", "glyphicon-heart");
    ddlTest.Items.Add(list);

前端

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="ddlTest" CssClass="selectpicker" runat="server"></asp:DropDownList>



        </div>
    </form>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="  https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

您在此链接添加自定义图标：https://icomoon.io/app/#/select

我认为最好的解决方案是这个。

希望能帮到你。

Drop-Down List Filled with Images in ASP.NET?

参考链接：ASP-DropDownList CodeBehind images

【讨论】：

这些链接的解决方案只能在 Firefox 中运行，这令人沮丧
@SonerGönül 我建议快速解决问题，谢谢。
它工作但只在Firefox中，为什么在谷歌浏览器中它不起作用？
@himesh 我正在编辑我的消息，请查看：*.com/posts/34672698/revisions Bootstrap Select Plugin 以支持所有现代浏览器。（铬、歌剧、火狐、IE8+）
谢谢，现在我得到了列表中的心形图标，但现在的问题是我想使用免费提供的未选中单选图标，所以我替换了你的代码 list.Attributes.Add("数据图标”，“字形心”）； with list.Attributes.Add("data-icon", "glyphicon-unchecked-radio");这不起作用，我也试过 list.Attributes.Add("data-icon", "unchecked-radio");但运气不好