jQuery hide selectMenu?

Question

I'm using jQuery's selectMenu on a select tag like this.

$('#ddlReport').selectmenu()

in certain cases I want to hide it, and I can't figure out how.

this doesn't work:

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

neither does this

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

anyone?

Answer 1

Looking at the demos here and here, it seems selectmenu works by appending a

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

after the original select, containing the artificial select.

You could try accessing that using

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

Though it sounds like it may use other classes (instead of -button). This is also a kind of hackish workaround and I'm sure the plugin contains some way intended to let you access the newly appended menu.

Edit: Looking through the code in the second demo, it doesn't seem like there is any preprogrammed way to access the new select in that version at least.

Answer 2

After losing a few hours trying to figure this out. I finally wrapped the thing in a <div> and just show/hide on the div. Certainly far from elegant but it keeps me out of the jq mobile innards.

Answer 3

With newer versions of jQueryUI (I'm working with version 1.11.4), simply use the "widget" attribute:

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

Answer 4

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

works for me.

Answer 5

Thanks Armatus!

Just want to say that for me this worked:

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

Without the .ui-selectmenu-button class which doesn't exist in HTML.

Answer 6

This is the solution!

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

wrapping with a div or forcing usage of button classes are definitively more complicated.