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?

Would this work? `$("#ddlReport").next(".ui-selectmenu-button").hide();` — kei, May 02 '12 at 19:50

score 6 · Answer 1 · answered Sep 26 '13 at 17:20

6

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.

answered Sep 26 '13 at 17:20

Nick Van Brunt

15,244
11
66
92

score 5 · Answer 2 · answered Oct 27 '15 at 11:57

5

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

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

answered Oct 27 '15 at 11:57

Itaypk

1,103
10
25

Armatus · Accepted Answer · 2012-05-02T19:57:54.490

3

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.

edited May 02 '12 at 19:57

answered May 02 '12 at 19:50

Armatus

2,206
17
28

1

I cannot believe that jQuery mobile does not hide these spans automatically on reinitialization. I've tried `$('#my_select').prop('disabled', false).hide().selectmenu("refresh")` but it did not work correctly. Bogus "selects" were still visible. Finally I was forced to use approach similar to this answer `.prop('disabled', true).parents('.ui-select').hide();` Thanks to Armatus – d.k Feb 07 '13 at 12:05

score 3 · Answer 4 · edited Jun 04 '15 at 10:30

3

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

works for me.

edited Jun 04 '15 at 10:30

Artjom B.

61,146
24
125
222

answered Aug 21 '14 at 18:27

Chris M

31
1

score 1 · Answer 5 · edited May 06 '12 at 21:16

1

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.

edited May 06 '12 at 21:16

Charles Menguy

40,830
17
95
117

answered May 06 '12 at 10:29

Igal

135
2
10

score 0 · Answer 6 · edited Jun 04 '15 at 10:29

0

This is the solution!

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

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

edited Jun 04 '15 at 10:29

Artjom B.

61,146
24
125
222

answered Jun 04 '15 at 10:15

Maurizio Gennaro Cataldo

371
3
6

jQuery hide selectMenu?

6 Answers6