如何在ASP Dropdownlist ListItems中使用彩色圆圈?(没有jQuery) [英] How to use colored circles in ASP Dropdownlist ListItems? (without jQuery)

问题描述

目标:我希望有一个下拉列表，如果可用性为True，则显示绿色，如果可用性为False，则显示红色.

Goal: I would like to have a Dropdown list that shows the color green if someones if Availability is True, and red is someones Availability is False.

注意:我需要在没有jQuery的情况下进行操作(只是被告知我们不允许在项目中使用jquery).

NOTE: I need to do it without jQuery (I was just told we are not allowed to use jquery in our project).

问题/背景:我可以显示任何东西的唯一方法是使用CSS并将其放置在Dropdown列表本身上，如Smith教授在此图像的第一行所示.您会看到Jones教授的下一行正在下拉列表中显示数据库中的实际布尔值，尽管我想要一个彩色圆圈.

Problem/Background: The only way I could get anything to show was with CSS and placing it on the Dropdown list itself, as seen in the first row of this image for Prof Smith. You'll see the next row with Prof. Jones is displaying the actual boolean value from the database in the dropdown, although I want a colored circle.

我希望它位于下拉框中.如果他们做出了更改，它也应该(最终)能够更新数据库中的值.

I'd like it to be within the dropdown box itself. It should also (eventually) be able to update the value in the DB if they make a change.

如何使这些圆圈显示在下拉框中?

How can I get these circles to show inside the dropdown box?

我想要的下拉菜单如下所示:

What I want it the dropdown to look like:

实际上是什么样的:

我所做的事情:

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

• Tried CSS on the DropdownList as well as the ListItem, and inside of the listitem.

我也尝试过SVG，但是根本没有插入到ListItem中

I have also tried SVG but that didn't insert into the ListItem at all

我尝试通过C#代码添加CSS，但无法使其正常工作

I've tried adding CSS through the C# code but couldn't get it to work that way

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

推荐答案

我认为，如果不使用 div创建DDL的完整副本，则无法创建四舍五入的 option 元素.代码>元素，例如此示例.但是，最接近的是这样的.

I don't think you can create rounded option element without creating a complete copy of the DDL with div elements like in this example. But the closest you can get is something like this.

给DDL一个类，在这种情况下为 RoundedDDL

Give the DDL a class, in this case 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将其环绕，并移除外观为:none; 的箭头.您可以使用 option [value ="True"]]

Then with CSS make it round and remove the arrow with appearance: none;. You can style the select elements by value with option[value="True"]

<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.

And then some javascript to add the correct class to the DDL when a specific value has been selected.

<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>

这篇关于如何在ASP Dropdownlist ListItems中使用彩色圆圈?(没有jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！