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

本文关键字：文本 下拉列表 图像 动态 net 加载 | 更新日期: 2023-09-27 18:29:25

我正在从数据库中获取数据源并将其添加到下拉列表中，但对于文本，我想在列表项中添加一个图像。我试过以下代码

  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();

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

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

我的解决方案

我认为使用插件，但速度快，所有浏览器支持和良好的社区。I使用引导程序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

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

我希望能帮上忙。

ASP.NET中充满图像的下拉列表？

参考链接：ASP DropDownList CodeBehind图像

相关文章：