Question

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

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

但不是附加图像，而是印刷＆＃34;＆＃34;在下拉列表项

中

Answer 1

我的解决方案

我认为使用插件但速度快，所有浏览器支持和良好的社区。我使用bootstrap css，js和Bootstrapt Select Plugin - 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

使用文本动态加载下拉列表，并在c＃.net的下拉列表项中附加带有文本的图像

1 个答案: