How to use colored circles in ASP Dropdownlist ListItems? (without jQuery)

问题

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.

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

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:

What it actually looks like:

What I've done:

Tried CSS on the DropdownList as well as the ListItem, and inside of the listitem.
I have also tried SVG but that didn't insert into the ListItem at all
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();

回答1:

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.

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>

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>

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>

回答2:

I would just create some images and implement these CSS classes:

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

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

and would make sure that the items have the class you expect (set the CssClass attribute)

Also, you may want to implement a new Control class which extends ListItem, has a logical value for available and in the correct event (maybe PreRender, but I'm not sure) you set the CssClass to the correct value. That would separate your concerns.

回答3:

I'm not sure if I misunderstood your question, but I understand that you want to put the circle inside each ListItem.

One way to do this is to use a customizable selectmenu using jQuery UI, but if you want to keep the circle in the selected item you will have to make a small change, for this I have used the answer to this question as a base: Keep picture with Selectmenu of jQuery UI

ASPX/JS/CSS Code:

<!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("&nbsp;").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>

Result:

回答4:

This is it:

<!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&nbsp&nbsp&nbsp&nbsp</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&nbsp&nbsp<span class="badge badge-success"
                style="border-radius: 100%;">&nbsp&nbsp</span>`

            } else {
                x[i].innerHTML = `person&nbsp&nbsp<span class="badge badge-danger"
                style="border-radius: 100%;">&nbsp&nbsp</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>

check https://jsfiddle.net/yubeog4c/

just get the values into availability array and it should converted to boolean types.

Thanks!!!!

来源：https://stackoverflow.com/questions/64017726/how-to-use-colored-circles-in-asp-dropdownlist-listitems-without-jquery

标签

html

css

ASP.NET

drop-down-menu