JQuery hide selectMenu?

Question

I am using jQuery selectMenu in a select tag like this.

$('#ddlReport').selectmenu() 

In some cases, I want to hide it, and I cannot figure out how to do it.

this does not work:

 $('#ddlReport').selectmenu().hide(); 

and this one

 $('#ddlReport').hide(); 

is anyone

Answer 1

Looking at the demo here and here , it seems that selectmenu works by adding

 <span class="ui-selectmenu-button"> or (probably different selectmenu versions?) <a ... class="ui-selectmenu ..."> 

after the initial selection containing the artificial choice.

You can try to access this with

 $('#ddlReport').next('.ui-selectmenu .ui-selectmenu-button').hide(); 

Although it seems like it can use other classes (instead of -button ). This is also a kind of hacky workaround, and I'm sure the plugin contains some way to allow you to access the recently added menu.

Edit: After looking at the code in the second demo version, it doesn't seem like there is any pre-programmed way to access the new type in this version.

Answer 2

Having lost several hours trying to figure it out. I finally wrapped the thing in a <div> and just show / hide in the div. Of course, far from elegant, but it keeps me from mobile mobile devices.

Answer 3

  $("#ddlReport").parent().hide(); 

works for me.

Answer 4

With new versions of jQueryUI (I work with version 1.11.4) just use the "widget" attribute:

 $("#element").selectmenu( "widget" ).hide(); 

Answer 5

Thank you Armatus!

Just want to say that it worked for me:

 $('#ddlReport').next('.ui-selectmenu').hide(); 

Without the .ui-selectmenu-button class, which does not exist in HTML.

Answer 6

This is the solution!

 $("#yourSelectId").parent().hide(); 

wrapping with a div or enforcing button classes is ultimately more complicated.