c# - How to highlight a row of multiple list boxes on hover in asp.net?

Question

Welcome To Ask or Share your Answers For Others

c# - How to highlight a row of multiple list boxes on hover in asp.net?

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

c# - How to highlight a row of multiple list boxes on hover in asp.net?

I have 2 listboxes, currently I can mouseover the listbox and highlight an item on mouseover. But I want it such that when I mouseover to either listbox1 or listbox2, the items in both listboxes would be highlighted when I mouseover.

This is what I get now:

I want the first item of both listbox1 and listbox2 to be highlighted when I mouseover.

I have researched for a couple of hours on how to do this but none of them seemed to work for me.

Similarly, if I click on either listbox1 or listbox2, I would be able to select a row too.

I am not familiar with jQuery or Javascript, so I would prefer to have a solution that is either C# or CSS based.

*Note: It is not that I am not willing to share the codes I have tried with, I really deleted them after seeing that they did not work AT ALL and I have already spent days researching on this before resorting to StackOverflow, knowing that it has strict rules for asking questions. If I had known how to do I would not have asked here, thanks so much.

If I remember correctly I think I used the following code:

select option: hover{
color: pink
}

Or maybe I tried with

select option: ListBox1 : hover {

In my CSS, I really cannot remember anymore. Anyway to keep it simple none of the codes I tried worked.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:23:43+0000

You can set selected item of any listbox using C# since asp.net ListBox can be made to post back when an item is selected by setting AutoPostback ="true" in ListBox markup. Note that hovering over an item in Listbox will not cause a postback, so you cannot use C# for your hover requirement.

So, your situation would need C# as well as jQuery/JavaScript.

The option element hover event is captured using jQuery, while selected index changed is captured on server-side using C#. Sample aspx page that you can run on your end is given below. In hover event, I am using a class called hoverClass defined in the page to control hover appearance.

NOTE: The selected item appearance is not possible to customize through CSS since all browsers apply their own CSS of background color to selected option.

Assumption

I have assumed that when you hover/select an item in any one of the listboxes then an item with same index in other list box gets selected/hovered. This works in Chrome, Opera FireFox and Edge browsers.

You can see a video of how this sample page behaves at this url: Video of how page behaves

Sample aspx page with jQuery and C# code

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>
<script runat="server">

    protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //select the same index in other ListBox
        ListBox2.SelectedIndex = ListBox1.SelectedIndex;
    }

    protected void ListBox2_SelectedIndexChanged(object sender, EventArgs e)
    {
        //select the same index in other ListBox
        ListBox1.SelectedIndex = ListBox2.SelectedIndex;
    }
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Wrtap text in ListBox</title>
    <style>
        select[id*='ListBox1'] option {
            white-space: normal;
            /*min-height:40px;*/
        }

        .hoverClass {
            background-color: pink !important;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="ListBox1"
                Rows="6"
                Width="150px" AutoPostBack="true"
                SelectionMode="Single" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"
                runat="server">
                <asp:ListItem>Item 1 dsdds  sdsdsdsd sdsd sdsd sds xyz</asp:ListItem>
                <asp:ListItem>Item 2</asp:ListItem>
                <asp:ListItem>Item 3 gfgf kgkgkg kgkkg abc</asp:ListItem>
                <asp:ListItem>Item 4</asp:ListItem>
                <asp:ListItem>Item 5</asp:ListItem>
                <asp:ListItem>Item 6</asp:ListItem>
            </asp:ListBox>
        </div>
        <div>
            <asp:ListBox ID="ListBox2"
                Rows="6"
                Width="150px" AutoPostBack="true"
                SelectionMode="Single" OnSelectedIndexChanged="ListBox2_SelectedIndexChanged"
                runat="server">
                <asp:ListItem>Value 1</asp:ListItem>
                <asp:ListItem>Value 2</asp:ListItem>
                <asp:ListItem>Value 3 gfgf kgkgkg kgkkg abc</asp:ListItem>
                <asp:ListItem>Value 4</asp:ListItem>
                <asp:ListItem>Value 5</asp:ListItem>
                <asp:ListItem>Value 6</asp:ListItem>
            </asp:ListBox>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                //set size option for each select element since its needed for hover to fire
                $("select").each(function () {
                    this.setAttribute("size", this.options.length);
                });

                //select option hover event
                $("select option").hover(function (e) {
                    //remove  special hover classes from option elements
                    $("select option").each(function () {
                        $(this).removeClass("hoverClass");
                    });

                    //get option being hovered
                    var hoveredOption = $(e.target);

                    //style hovered option
                    if (hoveredOption.is('option')) {
                        hoveredOption.addClass("hoverClass");
                    }

                    //get the other listbox 
                    var otherListBox = null;
                    if (hoveredOption.parent().prop("id").indexOf("ListBox1") >= 0) {//you hovered over first list box
                        otherListBox = $("#<%=ListBox2.ClientID%>");
                } else if (hoveredOption.parent().prop("id").indexOf("ListBox2") >= 0) {//you hovered over second list box
                    otherListBox = $("#<%=ListBox1.ClientID%>");
                }

                //style the same index option in other ListBox with hover style 
                if (otherListBox && hoveredOption[0].index < otherListBox[0].options.length) {
                    $(otherListBox[0].options[hoveredOption[0].index]).addClass("hoverClass");
                }
                });
            });


        </script>
    </form>
</body>
</html>

Categories

c# - How to highlight a row of multiple list boxes on hover in asp.net?

c# - How to highlight a row of multiple list boxes on hover in asp.net?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags