Open DropDownList when mouse over

Question

I have a DropDownList in a updatepanel and bind it in code behind.

 <span id="dropdown" class='css-select-moz groupTitle' style="margin-right: 880px; padding-top: 0; margin-top: 0px; background: transparent">
                                <asp:DropDownList ID="SubCategoryDropDownList" AutoPostBack="true" OnSelectedIndexChanged="SubCategoryDropDownList_SelectedIndexChanged" runat="server" CssClass="css-select"></asp:DropDownList>
                            </span>

and style

 .css-select {
-moz-appearance: window;
background-position: left bottom;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px;
border: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: ellipsis;
background: transparent;
color: #FF8000;
}

I want open DropDown when mouse over, I use this script

$(document).ready(function(){
$("#SubCategoryDropDownList").hover(function(){
$(this).trigger('click');
 });
})

But don't open items, How to open DropDownList when mouse over?

Check comments and answers, there are plenty of links about that. — , Nov 19 '13 at 06:53
Sorry, but I've searched the internet and the website and then I raised my question — ar.gorgin, Nov 19 '13 at 06:59

score 0 · Answer 1 · answered Nov 19 '13 at 06:58

See you used .trigger() and you have to specify the click in the code to trigger, since it is not there the trigger won't be executed.

Note:

Execute all handlers and behaviors attached to the matched elements for the given event type.

What it means is this:

$("#foo").on( "click", function() { //<--the given event type "click"
   alert('clicked');
});
$("#foo").trigger("click"); // <---triggering the same event type "click"

From the documentation:

Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user:

Thanks, Are there any other solutions? – ar.gorgin Nov 19 '13 at 07:13 — ar.gorgin, Nov 19 '13 at 07:13

Bozhidar Stoinev · Answer 2 · 2013-11-19T07:07:44.617

0

What Hiral answered should do the trick BUT have in mind that it is a completely client handled functionality and you should either remove the AutoPostback="True" or utilize some sort of AJAX in order to do this. When the option's click event is triggered a PostBack occurs. Now the catch is that the option box in the response is still closed, so you don't notice the effect of the client script.

edited Nov 19 '13 at 07:07

answered Nov 19 '13 at 07:02

Bozhidar Stoinev

1
3

This is not enough since the trigger of the partial update is the DropDownList itself. So the UpdatePanel provided functionality won't do the magic you're looking for since the UpdatePanel updates only the TRIGGER's HTML, not the whole page :) – Bozhidar Stoinev Nov 19 '13 at 07:13

score 0 · Answer 3 · answered Nov 19 '13 at 07:59

0

refer This Fiddel It will Help you To understand :http://jsfiddle.net/AndreasPizsa/NzvKC/ :-)

answered Nov 19 '13 at 07:59

Tirthak

21
3

Thanks, but i want to use dropdown for select a item. – ar.gorgin Nov 19 '13 at 10:10
There is no information here except for a link to JSFiddle, and even that isn't a live link. – Fish Below the Ice May 05 '14 at 13:00

Open DropDownList when mouse over

3 Answers3

Note:

From the documentation: