【发布时间】：2021-01-09 01:13:30
【问题描述】：
目标：我想要一个下拉列表，如果可用性为真，则显示绿色，如果可用性为假，则显示红色。
注意：我需要在没有 jQuery 的情况下执行此操作（我刚刚被告知我们不允许在我们的项目中使用 jquery）。
问题/背景： 我可以显示任何东西的唯一方法是使用 CSS 并将其放在下拉列表本身，如史密斯教授的这张图片的第一行所示。您将看到 Jones 教授的下一行在下拉列表中显示数据库中的实际布尔值，尽管我想要一个彩色圆圈。
我希望它位于下拉框中。如果他们进行更改，它还应该（最终）能够更新数据库中的值。
如何让这些圆圈显示在下拉框中？
我希望它的下拉列表看起来像：
实际的样子：
我做了什么：
-
在 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();
【问题讨论】：
-
很确定这已经尝试过，唯一的方法是使用 javascript 库。也许吧。
-
@angleUr 下面是我的答案，您可以检查并可能给它一个绿色勾号和一个赞成票
-
@nikhilsugandh 嗨，谢谢，看起来您的解决方案使用/引用了 jQuery。我需要一个不使用 jquery 的。
-
@angleUr no 我用过 javascriot 没有 jQuery！！
-
@nikhilsugandh 那么我可以删除您的参考吗？你有：
标签： c# html css asp.net drop-down-menu