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?

Answer 1

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:

Answer 2

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.

Answer 3

请参阅此Fiddel ，它将帮助您了解： http://jsfiddle.net/AndreasPizsa/NzvKC/ : http://jsfiddle.net/AndreasPizsa/NzvKC/ :-)