Monday 11 March 2013

Display DropDownList Item on Mouse Hover Using Javascript


Display DropDownList Item on Mouse Hover Using Javascript


You can display the contents of the dropdownlists on hovering the Mouse Over the dropdown using the following Javascript Code..


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">


<title>Dropdownlist Hover</title>
<script type="text/javascript">


function Open_ddl(ddl) {


document.getElementById(ddl).size = 5


}

function Close_ddl(ddl) {


document.getElementById(ddl).size = 1


}

</script>

</head>
<body>


<form id="form1" runat="server">


<div>


<asp:DropDownList ID="DropDownList1" runat="server" onmouseover="Open_ddl('DropDownList1')"


onmouseout="Close_ddl('DropDownList1')">


<asp:ListItem>--Select--</asp:ListItem>


<asp:ListItem>Vishal</asp:ListItem>


<asp:ListItem>Vivek</asp:ListItem>


<asp:ListItem>Amit</asp:ListItem>


<asp:ListItem>Suresh</asp:ListItem>


</asp:DropDownList>


</div>


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

2 comments:

  1. document.getElementById('ddl').size = 5

    ddl should be in single quotes...
    :)

    ReplyDelete
  2. No It will be not.. However If you want you can keep 'DropDownList1' in single quotes in the document.getElementById .. But since we are assigning the value of ddl in dropdownlist tag itself:



    So we dont need to specify it again.. So the value of ddl in the function Open_ddl and Close_ddl will be DropDownList1 .. It will not hamper the performance..

    For More Details, You can check the following link:

    http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

    In case of any doubts you can test the application to see if this working or not.

    Thank You.

    ReplyDelete

Thank You for Your Comments. We will get back to you soon.

back to top