Question

在后面的代码中，我正在创建一个Control：一个在某些图片内部的下拉列表。

DropDownList ddlEventIcone = new DropDownList();
ddlEventIcone.ID = "eventIconeDDL";
ddlEventIcone.Width = Unit.Pixel(110);

然后，我想在其中放置图片，所以我从这样创建的地图中获取它们：

Dictionary<string, Image> iconeMapping = new Dictionary<string, Image>();
iconeMapping .Add(iconeName, myImage);

我将它们放在一个ListItem中，并将其绑定到下拉列表：

foreach (Image image in iconeMapping.Values.ToArray())
{
    lImageddl.Add(image.ImageUrl.Replace("~", "../.."));// the tild wasn't working
}

我将列表与dropdownList绑定：

ddlEventIcone .DataSource = lImageddl;
ddlEventIcone .DataBind();

我使用Javascript将元素的“类型”精确化为Img：

foreach (ListItem listItem in ddlEventIcone.Items.Cast<ListItem>())
{
   listItem.Attributes.Add("class", "imageconverter");
 }

使用Javascript：

  $(function () {
            $(".imageconverter").each(function () {
                $(this).html('<img src="' + $(this).text() + '">');
            });
        });

结果是一个带有“空”选项的下拉列表，没有显示任何内容（空白行），但是在源页面中却是我得到的：

<select name="DigitalCalendarGrid$ctl09$eventIconeDDL" id="DigitalCalendarGrid_ctl09_eventIconeDDL" style="width:110px;">
        <option value="../../images/Event/cycling.png" class="imageconverter" width="10" height="10"><img src="../../images/Event/cycling.png"></option>
        <option value="../../images/Event/football.png" class="imageconverter" width="10" height="10"><img src="../../images/Event/football.png"></option>
    </select>

EDIT Precision：在Chrome DevTools中，当我将鼠标移到图片路径上时，它会显示图片，但提示

0x0 pixels (Natural 256x256 pixels)

以编程方式将图像放入下拉列表ASP

0 个答案: