如何在 ASP Dropdownlist ListItems 中使用彩色圆圈？ （没有 jQuery）
Posted
技术标签:
【中文标题】如何在 ASP Dropdownlist ListItems 中使用彩色圆圈？ （没有 jQuery）【英文标题】：How to use colored circles in ASP Dropdownlist ListItems? (without jQuery) 【发布时间】：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 那么我可以删除您的参考吗？你有： 【参考方案1】：我认为如果不使用 div 元素（如 this example）创建完整的 DDL 副本，您将无法创建圆角 option 元素。但你能得到的最接近的是这样的。
给 DDL 一个类，在本例中为 RoundedDDL
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="RoundedDDL">
<asp:ListItem Text="" Value=""></asp:ListItem>
<asp:ListItem Text="" Value="True"></asp:ListItem>
<asp:ListItem Text="" Value="False"></asp:ListItem>
</asp:DropDownList>
然后使用 CSS 将其变为圆形并使用 appearance: none; 删除箭头。您可以使用 option[value="True"] 按值设置 select 元素的样式
<style>
.RoundedDDL
appearance: none;
width: 30px;
height: 30px;
border-radius: 15px;
border: 1px solid black;
background-color: white;
cursor: pointer;
select option
background-color: white;
select option[value="True"]
background-color: green;
select option[value="False"]
background-color: red;
.red
background-color: red;
.green
background-color: green;
</style>
然后一些 javascript 在选择特定值时将正确的类添加到 DDL。
<script>
$('.RoundedDDL').bind('change', function ()
var $this = $(this);
$this.removeClass('green');
$this.removeClass('red');
if ($this.val() === 'True')
$this.addClass('green');
else if ($this.val() === 'False')
$this.addClass('red');
);
</script>
【讨论】：
嗨@VDWWD，我实现了这个，它使下拉菜单本身成为一个圆圈，然后当我点击它时变回一个正方形，红色填充整个背景。我希望它是一个正方形，但在显示圆圈内有值。我在原始帖子中添加了一张图片以进行澄清。请让我知道您的代码是否可以实现这一点。 不，不幸的是这是不可能的。因为使用 CSS 你只能用<option> 做很多事情，比如颜色或背景颜色。不支持边界半径。如果你绝对想要它，你需要像@nikhil sugandh 的解决方案
嗨，VDWWD，不幸的是，他的解决方案使用了引导程序，该引导程序在标题下列出了项目。我希望它根据数据库中的内容显示默认值。我希望它看起来类似于 Julian 的解决方案。【参考方案2】：
我会创建一些图像并实现这些 CSS 类：
.available
background-image:url('images/available.png');
.unavailable
background-image:url('images/unavailable.png');
并确保项目具有您期望的类别（设置CssClass 属性）
另外，你可能想要实现一个新的Control 类，它扩展ListItem，具有可用的逻辑值，并且在正确的事件中（可能是PreRender，但我不确定）你设置@ 987654327@ 到正确的值。这样你的顾虑就会分开。
【讨论】：
谢谢。图像 URL 位置根据服务器（REL/PROD）而变化，所以我在 C# 中设置了它。我尝试使用 C# 添加它，但是，如果我将它添加到 ListItem 中，则会出现“ListItem 不包含 Style 的定义 ...”的错误 - 我如何将它设置为等于变量 ProfessorAvatar ？ 我也试过：ListItem item = ddlAvailability1.Items[0]; item.Attributes["style"] = "background: url(" + ProfessorAvatar + ");background-repeat:no-repeat;"; @angleUr 也许此链接可以帮助您阐明如何通过 C# 设置元素样式：***.com/questions/104458/… 我也试过了，但没有显示，它只是一个空盒子。 @angleUr 你能显示你曾经这样做过的代码吗？【参考方案3】：我不确定我是否误解了您的问题，但我了解您希望将圆圈放在每个 ListItem 内。
一种方法是使用jQuery UI 使用可自定义的选择菜单，但如果您想将圆圈保留在所选项目中，则必须进行一些小的更改，为此我已使用此问题的答案作为基础：Keep picture with Selectmenu of jQuery UI
ASPX/JS/CSS 代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
$(function ()
$.widget("custom.iconselectmenu", $.ui.selectmenu,
_renderItem: function (ul, item)
var li = $("<li>"),
wrapper = $("<div>", html: item.element.html() );
if (item.disabled)
li.addClass("ui-state-disabled");
$("<span>",
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
)
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
);
$("#<%=dpwTest.ClientID%>")
.iconselectmenu(
create: function (event, ui)
var widget = $(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'selected" class="status-selected"> ').html(" ").appendTo(widget);
// Keep always the selected item class (for example, when the page load a specific item)
$span.attr("style", $(this).children(":selected").data("style"));
,
change: function (event, ui)
$("#" + this.id + 'selected').attr("style", ui.item.element.data("style"));
)
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons status");
);
</script>
<style>
.ui-selectmenu-menu .ui-menu.status .ui-menu-item-wrapper
padding: 15px 10px 0 30px;
padding-bottom: 10px;
.ui-selectmenu-menu .ui-menu.status .ui-menu-item .ui-icon
height: 24px;
width: 24px;
top: 0.1em;
.ui-selectmenu-text
padding-left: 2em;
.status-selected
position:absolute;
right:auto;
margin-top:-12px;
top:50%;
.ui-icon, .ui-widget-content .ui-icon
background-image: none;
.ui-selectmenu-button.ui-button
text-align: left;
white-space: nowrap;
width: 7em;
</style>
<form id="form1" runat="server">
<div>
<label for="dpwTest">Prof. Smith</label>
<asp:DropDownList ID="dpwTest" runat="server">
<asp:ListItem Text="Yes" Value="True" data-class="status" data-style="height: 25px; width: 25px; background-color: green;border-radius: 50%; display: inline-block;" />
<asp:ListItem Text="No" Value="False" data-class="status" data-style="height: 25px; width: 25px; background-color: red;border-radius: 50%; display: inline-block;" />
</asp:DropDownList>
</div>
</form>
</body>
</html>
结果：
【讨论】：
我喜欢这个样子！但这可以只用 C#/ASP.net 而不用 jQuery 来完成吗？ 抱歉，我不确定如何在 Vanille JS 中应用它，这是可能的，但就我而言，我需要一段时间才能做到...... 我试过了。唯一不同的是，我将 css 放入了我已经拥有的 css 文件中。我将 jquery 添加到我在 aspx 文件中已有的一些 js 中。它在下拉菜单中显示“是”和“否”，但不显示圆圈 并且在 css 文件中，除了我在答案中添加的样式之外，您还有其他样式吗？也许样式之间可能存在冲突 是的，但没有一个以“.ui-”开头【参考方案4】：就是这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">person1    </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">person2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">person3</a>
</div>
</li>
</ul>
</div>
</nav>
<Script>
var avaliability = [true, false, false];
var x = document.getElementsByClassName('dropdown-item');
for (var i = x.length; i--;)
if (avaliability[i] === true)
x[i].innerHTML = `person  <span class="badge badge-success"
style="border-radius: 100%;">  </span>`
else
x[i].innerHTML = `person  <span class="badge badge-danger"
style="border-radius: 100%;">  </span>`;
</Script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
检查 https://jsfiddle.net/yubeog4c/
只需将值放入可用性数组中，它就应该转换为布尔类型。
谢谢！！！！
【讨论】：
嗨@nikhill，我喜欢圆圈的外观，但下拉列表本身看起来与我的下拉列表非常不同。它应该显示当前值，而无需单击向下箭头。向下箭头应该是您想要更改的时候。我还看到你摆脱了 .net DropdownList 和 ListItems。 @angleUr 与单击下拉列表时的要求一样，值应该改变，我想你应该使用 jquery 来处理它。！！ @angleUr 我用过简单的Bootstrap 点击下拉菜单时它们不会改变，下拉菜单应该已经有两个值，但默认为数据库中的任何值。它应该看起来像 Julian 的解决方案（但他使用 jquery，所以我无法实现它）。以上是关于如何在 ASP Dropdownlist ListItems 中使用彩色圆圈？ （没有 jQuery）的主要内容，如果未能解决你的问题，请参考以下文章
Asp.net mvc页面传值-- dropdownlist
如何在 !Page.IsPostBack 之后将我的项目保存在 asp:dropdownlist 中？
如何给DropDownList控件设置样式（ASP.NET MVC）