如何在 ASP 下拉列表列表项中使用彩色圆圈？（没有 jQuery）

Question

目标：我想要一个下拉列表，如果有人的可用性为真，则显示绿色，红色表示有人的可用性为假。

注意：我需要在没有 jQuery 的情况下完成（我刚刚被告知我们不允许在我们的项目中使用 jquery）。

问题/背景：我可以显示任何内容的唯一方法是使用 CSS 并将其放在下拉列表本身，如史密斯教授这张图片的第一行所示。您将看到琼斯教授的下一行在下拉列表中显示来自数据库的实际布尔值，尽管我想要一个彩色圆圈。

我希望它位于下拉框中。如果他们进行更改，它也应该（最终）能够更新数据库中的值。

如何让这些圆圈显示在下拉框中？

我希望它的下拉菜单看起来像：

它实际上是什么样子：

我所做的：

• 在 DropdownList 以及 ListItem 和 listitem 内部尝试了 CSS。

• 我也尝试过 SVG，但根本没有插入 ListItem

• 我试过通过 C# 代码添加 CSS，但无法让它以这种方式工作

CSS :

.dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
}

.greendot {
    background-color: #89C742;
}

.reddot {
    background-color: #fe0505;
}

aspx/html：

<asp:DropdownList runat="server" id="ddl1" class="dot greendot">
    <asp:ListItem ID="LT1"></asp:ListItem>
    <asp:ListItem ID="RT1"></asp:ListItem>              
</asp:DropdownList>

<asp:DropdownList runat="server" id="ddl2">
    <asp:ListItem ID="LT2"></asp:ListItem>
</asp:DropdownList>

C#：

LT2.Text = professorStatsList[1].Available.ToString();

Answer 1

我只是创建一些图像并实现这些 CSS 类：

.available {
    background-image:url('images/available.png');
}

.unavailable {
    background-image:url('images/unavailable.png');
}

并确保这些项目具有您期望的类（设置属性CssClass）

另外，您可能想要实现一个新Control类，它扩展了ListItem，具有可用的逻辑值，并且在正确的事件中（也许PreRender，但我不确定）您将设置CssClass为正确的值。这会分开你的担忧。