menu

Update: For those interested in using this plugin: we now recommend
that you download the source from Felix Nagel’s revisions of our plugin,
as he’s made many improvements since we first published it. You can find
Felix’s branch on Github here:
http://github.com/fnagel/jquery-ui.
To download a zip, look for the silver “Downloads” button near the top
right of the page.

We recently contributed a number of our own plugins to the jQuery UI
labs repository, a new branch of the jQuery UI project dedicated to
future plugin development. Our latest contribution to labs is the
selectmenu plugin, which is designed to duplicate and extend the
functionality of a native HTML select element, and lets you customize
the look and feel, add icons, and create hierarchy within the options.
Best of all, it’s built with progressive enhancement and accessibility
in mind, has all the native mouse and keyboard controls, and
is ThemeRoller-ready.

HTML select elements, like many other form elements, are nearly
impossible to style and customize across browsers. This jQuery UI widget
provides an accessible, styleable, and configurable replacement for
select elements, allowing you to customize their behavior and appearance
for a richer user experience. The plugin uses progressive enhancement to
pull the content and state information from the select before replacing
it in the page. After replacing the select element, the selectmenu
continues to act as a proxy to the select that it replaced (even though
it is hidden from the user), so when the form is submitted, the select
value is still there to pass data to the server.

Although this plugin is still in development, we’ve already implemented
enough features to make it useful in real-world projects. Some of the
features currently supported are:

Keyboard accessibility The keyboard events match the native
select implementation of popular browsers, including support for
arrow keys, enter, space, tab, home, end, page up, and page down.
The menu is keyboard accessible while closed as well!

ARIA support ARIA attributes are added to the component, making
this plugin an accessible replacement for a native select element
(for users with modern screen readers).

Form label association If there’s an associated form label on
the page, clicking it will focus the selectmenu widget, and its
“for” attribute will properly associate with the selectmenu widget
for accessibility purposes.

Option Text Formatting The format option allows you to customize
the text of every option, creating complex formatting not possible
in native select elements.

Optgroup support select elements with optgroups are translated
into embedded HTML lists with a content-text label matching the
optgroup’s label.

Disabled attributes on the select element will disable the new
component as well.

Quick Type-ahead Like a native select menu, you can quickly
access options by typing their first letter. Repeating a letter will
iterate through the options beginning with that letter.

Callback events The selectmenu plugin provides callbacks for
open, close, select, and change events, allowing you to execute
scripting based on those events. The change event even triggers a
change event on the original select element, allowing you to
reliably track form change events.

Many more updates are included in Felix Nagel’s forked copy of
this plugin. See download options below for info

handleWidth: 26, width that the icon arrow block will hang off
the edge in a ‘popup’ style menu

maxHeight: null, the maximum height of the menu (with support
for scrolling overflow).

icons: null, an array of objects with “find” and “icon”
properties. “find” is a jQuery selector, “icon” is a jQuery UI
framework icon class (“ui-icon-script”). This allows you to append
span elements to options for use as icons.

format: null, Accepts a function with a single argument that
can be manipulated and returned with any level of manipulation you’d
like

Update: For those interested in using this plugin: we now recommend
that you download the source from Felix Nagel’s revisions of our plugin,
as he’s made many improvements since we first published it. You can find
Felix’s branch on Github here:
http://github.com/fnagel/jquery-ui.
To download a zip, look for the silver “Downloads” button near the top
right of the page.

There are a number of features still waiting to be implemented in this
plugin, and it has not yet achieved priority to move into the
“development” branch of the jQuery UI project. In order for this widget
to be improved and developed further by the jQuery UI team, we need help
finalizing the planned feature set. You can find the planning status and
documentation for the selectmenu plugin here:
http://wiki.jqueryui.com/Selectmenu
(it’s public for reviewing the status but you must join the jQuery UI
planning wiki in order to comment or edit).

600

Comments

<div id="commentNumber1" class="commentEntry">

<p>Whoa! Really nice job here! Any idea when this might be going live? Could use something like this for some rather long forms.

One question (and this might be a browser/css thing):
Rollover state seems to have rounded corners and colored background creating a sharp edge. Normal state is still a rectangle. I’m viewing with FF2.0 on windows.

<p>Oh wow… this can bring some new life to that ugly sharepoint thing… thanks to jquery and plugins like this.. It makes Microsoft Sharepoint look, what can I say, modern?

</div>
<p class="posted"><a href="#commentNumber8">Comment</a> by

LOVE_MOSS_NOT
on 07/09 at 03:44 PM

<div id="commentNumber9" class="commentEntry">

<p>Hi, This is really great!

I have a series of select menus populated by the previous selections (ajax). When the select menu is initialised (on page load) it populates ul/li with the appropriate options but if the options are created after pageload then the ul/li’s are blank. I have tried to call the $(’select#SubOptionGroup’).selectmenu() on the select change thinking it would reload the script with the new options but it did not. is there a solution or am i attacking this from the wrong angle.

Thanks for any advice & and all the hard work / scripts you guys create

Although, I’m having some css problems—my css reset keeps messing up the font-size. Is there a way to set the font-size of the Selectmenu?

</div>
<p class="posted"><a href="#commentNumber14">Comment</a> by

R7S
on 07/23 at 12:54 PM

<div id="commentNumber15" class="commentEntry">

<p>I also was having problems with CSS and, apart from that, once a select has been transformed it is not straighforward to use it as a normal select when for example you need to repopulate, add or remove items etc.

For now I am back to using my own plugin (which is to style a whole form).
The select is pretty but not as much as it is when styled with your plugin, but it is more usable like a “standard” select.
I’ll keep an eye on selectmenu anyway, it looks great ;)

</div>
<p class="posted"><a href="#commentNumber15">Comment</a> by

Vito Botta
on 07/23 at 01:03 PM

<div id="commentNumber16" class="commentEntry fg">

<p>@R7S: You can use themeroller.com to design a theme for this widget. Global font size will do what you need.

@Vito: If you want to modify (add/remove/edit) the options within the custom select, you’ll need to modify both the custom select and the hidden select element, because the custom select menu needs to maintain a direct mapping to the hidden select element. It shouldn’t be difficult to do this though. I’d suggest destroying the custom select, doing whatever you need to do to the select element, and then building the custom select again.

I used replaceWith instead of appending option elements to the existing select element because I’m pretty sure there are limitations with modifying select element innerHTML in IE6 (I’m not positive, though).

</div>
<p class="posted"><a href="#commentNumber16">Comment</a> by

Scott
(Filament) on 07/23 at 01:26 PM

<div id="commentNumber17" class="commentEntry">

<p>Unfortunately the script/css isn’t working so well with my CSS reset stylesheet (or the other way around). I’ve tried creating a custom theme but my reset stylesheet ends up overwriting the font-size.

</div>
<p class="posted"><a href="#commentNumber17">Comment</a> by

R7S
on 07/23 at 02:08 PM

<div id="commentNumber18" class="commentEntry">

<p>Scott,

Many thanks, I will definitely try tomorrow with the destroy method :)
I like your selectmenu too much not to try again :D
Wouldn’t it be a good idea to add some wrapper methods to your plugins, so that this is done automatically?

</div>
<p class="posted"><a href="#commentNumber18">Comment</a> by

Vito Botta
on 07/23 at 02:14 PM

<div id="commentNumber19" class="commentEntry">

<p>I managed to fix my font-size problem but I did notice one thing:

After you select an option, the select remains in a focused state. Is there a way to make it remove the focus after selection?

Thanks mate

</div>
<p class="posted"><a href="#commentNumber19">Comment</a> by

R7S
on 07/23 at 02:50 PM

<div id="commentNumber20" class="commentEntry fg">

<p>@R75: We did that to match a native select element, which retains focus after making a selection (at least in the popular browsers we were emulating). You can use the tab key to blur, or click away.

If you need it to behave differently than a native select, you’ll need to modify the script source. A few of our methods, such as close() have an argument for retaining focus, which is flagged true in the case of selections. I’d start there :)

@Vito: Good to hear. The destroy method will return the select element back to it’s pre-init state. That appears to cover what you need, considering you’ll need to modify it before re-init. What sort of helper methods were you thinking of?

</div>
<p class="posted"><a href="#commentNumber20">Comment</a> by

Scott
(Filament) on 07/23 at 02:56 PM

<div id="commentNumber21" class="commentEntry">

<p>Filament do it again.&nbsp; You guys are sick!

</div>
<p class="posted"><a href="#commentNumber21">Comment</a> by

Paul Gardner
on 07/24 at 01:53 AM

<div id="commentNumber22" class="commentEntry">

<p>Hello

I just noticed something—if you have a slider underneath the select, the knob on the select shows through the options box when it is visible.

Cheers

</div>
<p class="posted"><a href="#commentNumber22">Comment</a> by

R7S
on 07/24 at 06:42 PM

<div id="commentNumber23" class="commentEntry">

<p>Trying to get two selectmenu’s side by side, as if it were part of a toolbar… after applying .selectmenu(), the two side by side selects are now one on top of the other.&nbsp; Not sure what style is changing the layout.&nbsp; I’m using the demo page for testing.

Any suggestions on how to get a side by side selectmenu?

Thx,

John

</div>
<p class="posted"><a href="#commentNumber23">Comment</a> by

John Cole
on 07/25 at 10:43 AM

<div id="commentNumber24" class="commentEntry">

<p>Awesome plugin, however how do you handle custom jquery UI namespaces?&nbsp; To workaround this, I’ve applied another input var that is defaulted to ‘body’.&nbsp; The generated ul will append to the passed in selector instead.&nbsp;

<p>Hi, here are a few remarks that I’ve come to while working with this plugins. I noticed a few errors.

- If you call .selectmenu() on a select that is currently in a <div
style="display: none"… >, the selectmenu will have a 0 width when you show
the <div >. Workaround: use “.selectmenu({width: 150px});” for instance.
- If you call .selectmenu() on an empty select, there is a big failure; I get
“TypeError: selectOptionData[this._selectedIndex()] is undefined” on the
Firebug console and both the original select and the selectmenu end up
displayed.
- If you click on the selectmenu, and then click again without moving the mouse,
the selectmenu loses the focus and the whole page gets the focus.

Hope this can help.

Regards,

jonathan

</div>
<p class="posted"><a href="#commentNumber25">Comment</a> by

Jonathan Protzenko
on 08/04 at 10:42 AM

<div id="commentNumber26" class="commentEntry">

<p>Hi, I’ve noticed a bug: if you have spacing in optgroup labels, group is displayed for every element of the group (repeated x times):

<optgroup label="two words">

Otherwise, plugin looks nice :)

</div>
<p class="posted"><a href="#commentNumber26">Comment</a> by

ReTox
on 08/06 at 10:47 AM

<div id="commentNumber27" class="commentEntry">

<p>Very nice plugin, congrats for the beautiful work!

How should I proceed to integrate the <label> tag content as the menu title in the dropdown style?

@John: to get two selectmenu’s side by side, just left-float them, like this:
a.ui-selectmenu-dropdown {float: left; text-decoration: none}

</div>
<p class="posted"><a href="#commentNumber27">Comment</a> by

Dan
on 08/10 at 12:49 PM

<div id="commentNumber28" class="commentEntry">

<p>Hi fellows!

Interesting, nice and useful, let me report a small incompatibility with DD_roundies_0.0.2a.js, thank you

</div>
<p class="posted"><a href="#commentNumber28">Comment</a> by

Peter
on 08/12 at 06:13 PM

<div id="commentNumber29" class="commentEntry">

<p>Hi guys.&nbsp; I was looking to use this plugin, but found the performance far too slow, as well there being no option to have the menu open out to the left, rather than the right (for selects with decently long text, which you don’t want wrapped, located in a right sidebar area).&nbsp;

I had 5 selects converting; a 7 option one, a 30 option one, a 450 option one, a 30 option one… and the main slow select for this script, a 254 option select where each option had an icon. I’ve patched the problem, plus a good number of other slow spots, and currently have a version of this plugin that’s a bit over 7 times faster to initialize (14.5 seconds -> 1.6 seconds), and where I’ve added in at least basic support for left-opening menus. (My solution is a hack, at the moment - I just create a class based on css calculated positions in the document, add that to document.styleSheets[0], then assign the select a “leftOpeningMenu” class via a plugin option. Using $.position would be better and far less hacky, long term).

I’ve tried emailing your contact address these comments and the revised version of the script, but all emails bounced. Could you email me, so I know a good address to send it to?

</div>
<p class="posted"><a href="#commentNumber29">Comment</a> by

Brian Schweitzer
on 08/15 at 03:46 PM

<div id="commentNumber30" class="commentEntry">

<p>Great work, very useful!

@ReTox: I get that error too, but i found a workaround (at least it works for me): <optgroup label="two_words">

<p>Did anyone figure out how to fix the following that Jonathan posted earlier:

If you call .selectmenu() on a select that is currently in a <div
style="display: none"… >, the selectmenu will have a 0 width when you show
the <div >. Workaround: use “.selectmenu({width: 150px});” for instance.

I am trying to avoid putting a fixed width on the menu.

</div>
<p class="posted"><a href="#commentNumber44">Comment</a> by

Brandon
on 09/04 at 11:01 AM

<div id="commentNumber45" class="commentEntry">

<p>Thanks for this promising selectmenu

The creation of the popup crash if you use a library like prototype.js which extend Array.

easy to fix, replace line 133:
---------
for(var i in selectOptionData){
---------

<p>I am having trouble with the location and placement of the select menu whenever the target select object is nested within other objects. I have some collapsible panels that are nested within some other elements, and as a result, the selectmenus seem to just hover above the page (i did notice they are appended to the body, which in combination with absolute positioning is probably the problem i am seeing.). The odd thing is.. whenever i mouseover the selectmenu, the location does get fixed, but any scrolling or changes to the layout cause the problem to occur again. Can anyone make a recommendation for me, I need to get this fixed and move on to other stuff as soon as I can… Thanks in advance....

Ray

</div>
<p class="posted"><a href="#commentNumber50">Comment</a> by

The Ray
on 09/28 at 07:28 AM

<div id="commentNumber51" class="commentEntry">

<p>Hi, it can’t make it work correctly when using the CSS Scope on jQuery UI Theme Builder.

How do I make it work?
Thank you

</div>
<p class="posted"><a href="#commentNumber51">Comment</a> by

Habib
on 10/02 at 04:17 PM

<div id="commentNumber52" class="commentEntry">

<p>Fantastic script!

I did notice a bug when applying to select dropdowns that have width set in percentage (100%) - when I resize the browser window, the dropdown doesn’t resize itself to fit as it should. I’m sure this is a relatively easy fix, but for someone just starting out with jQuery, I’m having a tough time figuring it out.

Any help would be much appreciated :)

</div>
<p class="posted"><a href="#commentNumber52">Comment</a> by

Timm Stokke
on 10/09 at 04:17 PM

<div id="commentNumber53" class="commentEntry">

<p>Is there a possibility to create nested menus?

Something like the flyout menu?
We have some selectboxes that represent a treemodel.
We ould use optgroups for that I guess, but I’d like to have the optgroup open to the right (the list is very large)
Also, we would like to be able to select the optgroup, something that’s not possible with a normal select.
In a normal select you would do:

Group
-Item1
-Item2
-Select group
Group
-Select group
-Item3

</div>
<p class="posted"><a href="#commentNumber53">Comment</a> by

Joris
on 10/11 at 02:49 AM

<div id="commentNumber54" class="commentEntry">

<p>Hello guys, here are the solutions for two bugs that were pointed out before. Both bugs happen when using the select inside a UI Dialog.

#1 problem: the select menu doesn’t show up because its width is zero. That’s because when you call .selectmenu() the element is hidden so his computed width doesn’t exist yet.

The solution consists in cloning the element, appending it to the document body (so you know it’s ancestors aren’t hidden too) yet applying some CSS so the browser can compute its width properly.

#2 problem: the options appear behind the UI Dialog:

Just set the z-index of .ui-selectmenu-menu class to something higher than the UI Dialog. A z-index of 9000 will do it.

Nice work guys! Keep working on it!

</div>
<p class="posted"><a href="#commentNumber54">Comment</a> by

Luiz Brandao
on 10/12 at 02:03 PM

<div id="commentNumber55" class="commentEntry">

<p>Hello again,

Another thing I found you got wrong is the ‘value’ method. When we call $("select").selectmenu(’value’,’newvalue’); we usually expect it to set the value of the select, like jQuery would with $("select").val(’newvalue’). But instead, in this case, newvalue is the index of the element to be selected.

You should modify this method to reflect the same behavior of jQuery or change the method name to something like ‘index’.

You should also polish the CSS states of the options. One of the problems is that the top and bottom borders of some elements (mostly the first and last childs) are getting added to other borders resulting in a 2px width.

Bye.

</div>
<p class="posted"><a href="#commentNumber55">Comment</a> by

Luiz Brandao
on 10/12 at 04:03 PM

<div id="commentNumber56" class="commentEntry">

<p>Every time I try to use this plugin I get the following error in FF Firebug Console:

<p>Im actually using this selectmenu style on my website and it works GREAT!

Thanks for spending time on doing all this great utilites.

</div>
<p class="posted"><a href="#commentNumber58">Comment</a> by

TebboES
on 10/30 at 08:19 PM

<div id="commentNumber59" class="commentEntry">

<p>Great job so far....

I have two issues right now. The first is that in safari the closed version of the select is a bit too tall so you start to see the next item. You can see an example here http://skitch.com/nmaves/ngjd4/overflow.

The second issue is that FF3 does not select the “selected” item. This feature works in Safari but not FF.

</div>
<p class="posted"><a href="#commentNumber59">Comment</a> by

Nathan Maves
on 11/05 at 06:20 PM

<div id="commentNumber60" class="commentEntry">

<p>This plugin is extremely useful and there are very few articles as complete as this one focusing more complete explanation.

Your blog and its articles have become a reference in my job. I have found a lot of information here and recommend it to everyone visiting the Filament Group.
Congratulations on the competence and success!
Thanks.

<p>@Luiz: I’m not sure appending the select to the end of the body to get its width is the best approach because its width may change depending on its location in the DOM. I think you might just want to specify a width option when using this plugin with the dialog.

Good point about the value method, that name is a little misleading given its functionality. We’ll give it some thought.

@Stephen Young: Try the latest version in SVN. I think that problem *should* be fixed now.

@umpirsky: Since this component is built on the jQuery UI widget factory, you should use the selectmenu’s ‘disable’ and ‘enable’ methods instead. Just setting the disabled attribute won’t be enough, because the select element is hidden from all users anyway. We extended UI’s custom disable/enable methods in this plugin to disable both the hidden select element and the custom select menu (using an aria-disabled attribute as well as classes to style the disabled appearance). Try this:

<p>@Scott Thank you very much for fast response! It worked like a charm :)

Are this magic parameters documented somewhere?

And another problem. I have one large selectmenu with icons and several without on same page. When the firebug is enabled it takes long time to initialize them and pops up with debug/continue/stop dialog! I think the reason is the one with icons. I get classes for icons from my options:

The 3 selected lists are converted to selectmenu span at the begining
of the script.

When the user make a first selection with the first list, an another
jquery/json mecanism generate the content of the second select option
items. But at this time, the selectmenu spans must be updated with the
value of select option (display none).

My question is : how can I update the value of the selectmenu spans
after the update of the select options ?

I’ve see the method _refreshValue(). How can I access it ? What’s the
correct syntax ?

UI wise looks pretty good, but doesn’t work for me currently in any browser, so not ready for me to use in beta code.

Regards,
J

</div>
<p class="posted"><a href="#commentNumber81">Comment</a> by

Jamie
on 01/21 at 04:11 AM

<div id="commentNumber82" class="commentEntry fg">

<p>@Jamie: Can you confirm that the demo shown on this page has these errors you mentioned? I can’t reproduce them in the few browsers I just tried it with, and they don’t sound like they line up with the current code (but anything’s possible).

I’ve found the bug when you use select elements with tabindex attr defined. In that case it fails with :
tabindex is not defined
if(this.element.attr(’tabindex’)){ t...lement.attr(’tabindex’, tabindex); }

<p>I am surprised to not have anyone noticed that there was a bug with the v-scroll of the combo box when a specified height is set.

We cannot click in the “inner” area of the scroll, (up and down of the middle scroller, and on the 2 arrows neither..

It happens to me with Firefox 3.6, everything is fine in IE 8 ...

Can anyone help me with this, this is really not practical when we have a huge list of cities and can only scroll with the tiny middle scroll.

TIA !! And I must say I would really like to have this solved, because I LOVE these selectmenus !! Good Work !

</div>
<p class="posted"><a href="#commentNumber90">Comment</a> by

Lyne Boucher
on 02/16 at 03:43 PM

<div id="commentNumber91" class="commentEntry">

<p>First, very nice work! Love this plugin!

I just noticed a bug that occurs when the original select doesn’t contain any elements. This is unusual but the JavaScript shouldn’t crash. The error occurs around line 291, and wrapping the offending code in a try/catch should solve it. I’m not sure this is the best fix but it works.

@Matt: You might choose to send mobile devices a different experience, sure. As far as breaking rules of markup, we’ve taken care to write the markup and attributes based on the recommendations in the W3C’s WAI-ARIA specification. We also rewrote a simplified version of this script to accompany our book that has an improved ARIA implementation, and we’ll likely release it here soon, so stay tuned.

</div>
<p class="posted"><a href="#commentNumber96">Comment</a> by

Scott
(Filament) on 02/23 at 04:32 PM

<div id="commentNumber97" class="commentEntry">

<p>Can’t wait to use it. But of course, I also found a little bug:

When trying to close the popup selectmenu by clicking on the page (outside of the menu), it works if I click on text or other element. But clicking just on #content doesn’t work. This is a thing with the controls on this page, not external demo.

</div>
<p class="posted"><a href="#commentNumber97">Comment</a> by

Tomo
on 02/23 at 06:45 PM

<div id="commentNumber98" class="commentEntry fg">

<p>@Tomo: I think the issue you’re seeing is only there because we’re displaying the demo in an iframe. If it works on the external demo, it shouldn’t cause any trouble in a real setting.

</div>
<p class="posted"><a href="#commentNumber98">Comment</a> by

Scott
(Filament) on 02/23 at 06:48 PM

<div id="commentNumber99" class="commentEntry">

<p>@Filament When I click on UI your slider, and then selectmenu, slider does not loose focus.

<p>Great plugin but there is one problem. Quick type ahead doesn’t seem to work as advertised - or I misunderstood a concept - in default select you can type all characters - for example when choosing a year you can enter all four digits. Here it seems to react only on first two letters. You can reproduce it in demo and try to choose “faster” option in first select.

</div>
<p class="posted"><a href="#commentNumber104">Comment</a> by

mitt
on 03/05 at 07:22 AM

<div id="commentNumber105" class="commentEntry">

<p>I got undefined options at end of seletmenu in chrome, and undefined options at start of selectmenu in IE.

My in-house guy who uses JAWS tells me that he cannot read any of the select menu options. I implemented your script and it looks really good for sighted individuals. Any ideas as to why he is having problems accessing the menu with his reader?

<p>For those poeple using jQuery 1.4 &amp; the new jQuery UI 1.8 release here’s some changes you need to make to get this widget working with the new 1.8 widget factory as per this guide: <a href="http://jqueryui.com/docs/Upgrade_Guide" rel="nofollow">http://jqueryui.com/docs/Upgrade_Guide</a>

<p>I am trying to get the styled selectmenu to play nice with Selenium but it seems like it is hard to get Selenium to select items from styled select elements. How would you suggest that one tests pages using Selenium or Watir and this plugin?

</div>
<p class="posted"><a href="#commentNumber117">Comment</a> by

Gabriel Falkenberg
on 03/25 at 07:00 AM

<div id="commentNumber118" class="commentEntry">

<p>Hello

I found a small bug. When the optgroup values contains spaces, it does not seem to work any more.
Action:
I’ve replaced
var optGroupName = self.widgetBaseClass + ‘-group-’ + selectOptionData;
with
var optGroupName = self.widgetBaseClass + ‘-group-’ + selectOptionData.parentOptGroup.replace(/ /g, ‘_’);

The v-scroll doesn’t work only with FF >= 3.6
With olders releases of FF ; for example done with FF 3.5.3

Please help us !

Cheers

</div>
<p class="posted"><a href="#commentNumber119">Comment</a> by

Alexis Gruet
on 04/02 at 06:15 AM

<div id="commentNumber120" class="commentEntry">

<p>I use this extension on my site, but I get some empty space at the bottom of the page. Example <a href="http://automobi.li/oglas/Mercedes-Benz-180-Ponton/105" rel="nofollow">http://automobi.li/oglas/Mercedes-Benz-180-Ponton/105</a> . Form with selects is on the left side of the page, under “Brza pretraga”.

<p>Thanks Steve Esson for the insight on making this work with UI 1.8+, it did the trick!&nbsp; I had been pulling my hair out trying to deduce why my version of ‘popup’ menu style wasn’t working in IE but their example was.&nbsp; I finally realized I was using a newer version of jquery UI.

<p>Opening the select “"dropdown" Style with menuWidth wider than menu and text formatting” in the demo if the select is located near the down part of the visible screen causes the browser to open the select, scroll down the page, auto select the last visible option in the select and close the select itselft. I think this can be considered a bug.

I solved this issue associating the close event to mouse “click” instead of “mouseup”, using these lines:

<p>@Roberto: Replacing the mousdown/up events with click will disable the ability to make mousdown-drag-release type selections, which are supported in most native select elements in addition to the probably more common 2-clicks use case.

To make the menu usable without needing to scroll (when it’s low on a page) we’d actually recommend implementing collision detection to make the menu flip up or down depending on where it is in relation to the window. The current plugin doesn’t have this built in, but it would be relatively simple to add using jQuery UI’s new “position” plugin. When jQuery UI implements a selectmenu, it will definitely have collision detection built in.

</div>
<p class="posted"><a href="#commentNumber128">Comment</a> by

Scott
(Filament) on 05/03 at 08:50 AM

<div id="commentNumber129" class="commentEntry">

<p>Thank you for your reply, Scott. I will keep my “partial” solution for the moment, just because I don’t need the drag function.

I did some more debugging this moring and found out, that $.widget has a method _setOptions, but not a _setData.
So I’ve replaced _setData with _setOptions and now it’s working, i.e. if a select box has an attribute disabled="disabled", the selectmenu will be disabled too. You can also use jQuery(’#selectID’).selectmenu("option", “disabled”, true); after this change.

Kind regards
Andreas

</div>
<p class="posted"><a href="#commentNumber134">Comment</a> by

Andreas
on 05/12 at 04:42 AM

<div id="commentNumber135" class="commentEntry">

<p>@Steve: sorry, I had a typo: It should read “_setOption” and not “_setOptions”.

<p>@umpirsky: the syntax you just showed should create another menu. To avoid that from happening, you have to pass regular arguments (no brakets) and the first should be “option”. This may have changed in 1.8 though. Did you try Andreas’ fix in the source code? shown below:

I did some more debugging this moring and found out, that $.widget has a method _setOptions, but not a _setData.
So I’ve replaced _setData with _setOptions and now it’s working

<p>I have not tested the following in popup mode, but in dropdown mode I noticed something weird with Safari’s calculation of the select box width.&nbsp; One thing I noticed is that the selectWidth on safari is about 24px smaller than other browsers.

So if you set width to a particular select field using css: select { width:200px; }

FF, IE, Opera and Chrome seem to calculate the final width of the <a class="ui-selectmenu ..."> at 196px… not sure where the 4px goes… but Safari calculates the final width as 175px. Would you know why the widths are not consistent in Safari?

</div>
<p class="posted"><a href="#commentNumber147">Comment</a> by

Carl
on 05/28 at 10:56 AM

<div id="commentNumber148" class="commentEntry">

<p>... well, I just realized that I probably should use the width option in the .selectmenu() method, rather than trying to set the width through css.

Still curious why the width is calculated incorrectly in Safari when setting the width through css.

</div>
<p class="posted"><a href="#commentNumber148">Comment</a> by

Carl
on 05/28 at 11:07 AM

<div id="commentNumber149" class="commentEntry">

<p>I got exactly the same Safari (4.0.5) problem (but i didn’ show my comment about it here ?!).

<p>Nice to piece of work with awesome presentation. Thanks for your valuable ideas as it helps me to workout tasks successfully, became your regular visitor for knowledge sharing. Here i have an query : suppose if my user disables javascript then it work or not? If it doesn’t means what other option to solve this problem .

I need to fire an event on a select change, and with js i do a redirect to a certain page based on the selection value, using [removed] function.
$("select#my-select").change(function(){
selectedvalue= $("select#my-select option:selected").val();
[removed] = ‘mypage.php?val=’+selectedvalue;
}
It works fine on IE, FF and Chrome, but not on Opera.
Reason of this its that selectmenu replaces select options with ‘a’ links, with the ‘href’ parameter set to ‘#’ ( ie: my-option-text).
Opera and i guess all safari based web browsers, are gonna parse first that href parameter and not the js.
Faster solution i found was to remove from ui.selectmenu.js, the only two href="#" rel="nofollow" , on the button wrapper and li’s creation rows.

Comment out the following (line #147):
.click(function(){
return false;
})

Now you can specify the url location on the li value of the select list and voila… you got yourself an excellent styled autosubmit control. If you wish to have more form control values to pass on the target page just add them to the href value.
I tested it with IE7, IE8, FF3, Chrome 5, Safari 4 and Opera 10 on Windows. I can’t test it on Mac so if anyone is able to do so reply here to let us know

<p>How make dependent selects????? help me please!!!!!!!!!!!!!! i want to make two cascade select!!!!!!!! THANKS

</div>
<p class="posted"><a href="#commentNumber168">Comment</a> by

Mauricio G.
on 06/27 at 04:20 PM

<div id="commentNumber169" class="commentEntry">

<p>How someone provide an example of a callback please?

</div>
<p class="posted"><a href="#commentNumber169">Comment</a> by

Ryan W
on 06/29 at 03:45 AM

<div id="commentNumber170" class="commentEntry">

<p>Could*

</div>
<p class="posted"><a href="#commentNumber170">Comment</a> by

Ryan W
on 06/29 at 03:45 AM

<div id="commentNumber171" class="commentEntry">

<p>I did had the same problem with adding all content of select in one page to be append at the body - since it’s with visibility:hidden it creates a big space (especially when you have more than 5-8 selects in one page). The solution I’ve found:

1. At line 112 (development version) add display:none; - to add remove space at the same time with visibility:hidden;

.css("display", “none");

2. At line 359 add display:block; - to show lists once you click select

Don’t know but yes i suppose, because the real select is still on the page, even if you can’t see it.

</div>
<p class="posted"><a href="#commentNumber175">Comment</a> by

Mattia
on 07/04 at 02:25 AM

<div id="commentNumber176" class="commentEntry">

<p>@jd

It does work BUT whilst jQuery Validation knows about your underlying select control your shiney new super-duper select menu plugin knows nothing of the valid/invalid state of your select. There’s a few ways around this and I went with a simple uncomplicated solution.

1. Add a couple of public methods to your plugin to add/remove a class:

and also write custom validation methods that call your methods in 1 above.

It takes a bit of tuning depending on your jQuery Validaiton settings which can vastly effect the behaviour. I’ve managed to get it working just as well as a native select control in the scenarios I’ve deployed in.

<p>I was able to get it to work easily just by applying the validation (perhaps because I was also updating an additional hidden field that the value of the selectmenu was being copied over to) but....

The error message always displays below the element instead of the right, as with other elements. Any idea how to overwrite the default error class display for the selectmenu?

<p>Did the Filament Group folks create your own comment system? If not who’s are you using?

</div>
<p class="posted"><a href="#commentNumber180">Comment</a> by

Bill Caswell
on 07/12 at 03:57 PM

<div id="commentNumber181" class="commentEntry">

<p>Cross-browser disabling of options is something we’ve been missing for far too long. Is there a way to do that with your plugin?

</div>
<p class="posted"><a href="#commentNumber181">Comment</a> by

Jarvis
on 07/19 at 04:55 PM

<div id="commentNumber182" class="commentEntry">

<p>Hi and thank you so much for this amzing plugin.

I was so far using another plugin but this one seems better and trying to make it work in my website but i’m experiencing some trouble :(
here is the page: http://moroccan-arts.co.uk/index1.php
1# when i click on the select, it barely shows the list and then hide
2# i have a huge scrollbar in the windows beacause the content of the list is too long
3# it seems like i have a small conflict with formLabels, as you can notice you can see “First name”, “Last name” and “email” with the content of the list…

Could you please help me fixing these issues???
Thanks you very much
Regards

</div>
<p class="posted"><a href="#commentNumber182">Comment</a> by

Reda
on 07/20 at 08:13 AM

<div id="commentNumber183" class="commentEntry">

<p>@umpirsky / @nobody / @everybody:

if you’re getting ‘undefined’ values in your selectmenu and can’t find the source, it’s possibly because you’re using another library (or your own code) to add methods/properties to the Array object prototype. This causes this section:

for(var i in selectOptionData){
...
}

to iterate over those new methods/properties as well as the indices of the array. Add this line right after the for loop, like ‘nobody’ suggested, though I think this check might work better since an Array typeof is ‘object’:

I encountered this problem when the backend guys changed some .NET component (they moved from Enterprise Library 5.0 to 2.0 they tell me) and this may have changed an AJAX Toolkit componenet or something… I don’t know, just hoping this helps someone else.

On a related note, don’t try to implement the selectmenu ui on .NET Cascading Drop-Down controls… the change event triggered on the actual select box won’t trigger the cascade and when it does you’ll have to re-setup the menu on the next combobox on the callback event of the cascade (good luck finding that, I think our back-end guy altered a Toolkit component to get me it).

Actually, better yet, just don’t use .NET.

</div>
<p class="posted"><a href="#commentNumber183">Comment</a> by

Shawn Marincas
on 07/28 at 03:55 PM

<div id="commentNumber184" class="commentEntry">

<p>nobody got a solution for my problems???? :((

</div>
<p class="posted"><a href="#commentNumber184">Comment</a> by

Reda
on 07/28 at 10:08 PM

<div id="commentNumber185" class="commentEntry">

<p>@Reda

You can set maxHeight for your selectmenu… I’d recommend going with something like this:

$(’select’).selectmenu({
style: ‘dropdown’,
maxHeight: 300,
});

That should take care of #2 (FYI, you can actually find this info right at the top there)

Also, I can tell you that your labels have a z-index that is higher than the selectmenu items so that’s why it’s showing through… you gotta set the z-index of your ui-selectmenu-menu class to be higher than 999. That should solve #3.

As for your #1 issue? Got me, I suspect it’s another javascript event firing or some conflict with some other code. I recommend removing all the other javascript besides jQuery, UI and selectmenu and see if it’s still happening…

Actually, try the first two fixes first and see if that might fix it… when the super long list pops up it seems to expand the document height which I’m pretty sure causes a page redraw which maaaaaybe might be causing the box to lose focus and close… just a hunch, let us know if it works so it’s documented here.

Speaking of which, to the moderators/creators… this comment string is getting pretty long and has a significant number of really important bug fixes and work-arounds which are key to implementing this in certain environments. It’s also not the best knowledge base to search through… maybe some better documentation is in order or a nice wiki since a lot of people seem keen to contribute?

I tried integrating with ajax
but when the XMLHttpRequest is completed a new element in the form select the menu and I also define the theme jquery. but why the new element can not appear with themes such as SELECT element there on.
what should I do to overcome this. thanks

</div>
<p class="posted"><a href="#commentNumber191">Comment</a> by

herybarkan
on 08/15 at 11:36 PM

<div id="commentNumber192" class="commentEntry">

<p>@Fileament

Great plug-in and pretty straightforward in setting it up however, can you confirm if it “works” properly with NVDA screenreader?

NVDA doesn’t seem to read the label (e.g. ignores it)? I thought it was my code but this issue does happen on your site too. Does that not make it less accessibile?

Many thanks in advance!

</div>
<p class="posted"><a href="#commentNumber192">Comment</a> by

dillion
on 08/16 at 04:10 AM

<div id="commentNumber193" class="commentEntry">

<p>Great plugin. But does anyone else have an issue with NVDA ignoring the label? Works fine without JS so the structure is correct, but the plugin replacing the code results in NVDA just 100% ingoring the label.

</div>
<p class="posted"><a href="#commentNumber193">Comment</a> by

Ollie Wells
on 08/16 at 04:18 AM

<div id="commentNumber194" class="commentEntry">

<p>Nice plugin.

Is there a way to disable an select list element (option element)?

</div>
<p class="posted"><a href="#commentNumber194">Comment</a> by

Peter
on 08/17 at 02:28 AM

<div id="commentNumber195" class="commentEntry">

<p>@Filament

very nice plugin - great job!

nevertheless i found a bug:
when requesting html code by ajax that contains js+html to generate a selectmenu the button is appended into the container specified by the ajax-call but the menu is appended to the body element. i figured out that you tried to solve the ancestor issue for the absolute positioning of the menu (relative to the body) - which is ok so far.

but here comes the bug - when i replace my container (for example my page body) with another requested page the button is replaced in the DOM with my new content, BUT the menu still remains appended to the body. and when requesting the page again that contains the selectmenu another menu ul is appended to the body with the same id again and again which leaves a lot of garbage and blows up the html.

the solution:
it was obviously to append the menu after the button (that is appended after the html select-element) so i came up with following solution (that has the need to also fix the visibility issue):

2) fix element insertion in jquery-ui.selectmenu.js (search for the 2 occurences of ‘body’)
- at line 112 change .appendTo(’body’) to .insertAfter(this.newelement)
- at line 355 change .appendTo(’body’) to .insertAfter(this.newelement)

3) fix positioning problem with ancestor issue that appears when a parent of the selectmenu has different positioning than ‘static’:
- at line 488 change this.newelement.offset().left to this.newelement.position().left
- at line 491 change this.newelement.offset().top to this.newelement.position().top

Note: line numbers refer to the development version (currently linked js file above)

<p>possible with this example I am much easier to explain my difficulties.

click here for example problem.
if the select menu on click, select menu will generate events for other elements to load the form select the menu of this process also uses AJAX (XMLHttpRequest).
but if new elements emerge. why these elements can not change shape as the previous select menu ..
is there any solution to overcome this
thanks

I have a problem : when i execute it in the list I obtain the list but it appear 2 element that it isn’t in the list (two undefined) and I not understand why… Thanks

</div>
<p class="posted"><a href="#commentNumber209">Comment</a> by

Paul
on 09/01 at 02:42 PM

<div id="commentNumber210" class="commentEntry">

<p>@ Felix - thanks for your response. I take it that the latest version of selectmenu has fixed the issue that I raised earlier? <a href="http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber192" rel="nofollow">http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber192</a>

Just wondering as I am not able to find this in jQueryUI or fork versions.

Many thanks in advance. :o)

</div>
<p class="posted"><a href="#commentNumber210">Comment</a> by

dillion
on 09/02 at 05:50 PM

<div id="commentNumber211" class="commentEntry">

<p>@Paul

PHP arrays begin with 0, not 1 and you should not initialize an numeric array like an associative one.

@Dillion
No, I did not test this. I willing to do, but please recognize that all of my work here is done in spare time. Please add a report with the version of nvda your using here: http://github.com/fnagel/jquery-ui/issues

I am still having difficulties. element that appears in the process of AJAX are made but how to fill the element with the options and select or change a select element that I have created with the new select element.
I include the following examples of files that are still problematic
script
please can you fix my script
Please send to my email
herybarkan@gmail.com
thanks for your help

No currently not afaik. But the new roadmap is talking about a select menu, so perhaps…
see http://wiki.jqueryui.com/Roadmap
But there’s still much work to do (review accessibility, keyboard control, ...) . Any help is appreciated!

@Facundo
Its very hard to understand what you mean, but I estimate you’ve got the same problem as herybarkan. Please take a look!

@herybarkan
This is not free tech support. I really love to help, but my time is limited. I will try to take a look, but please consider a donation.

I’m started by calling $(’.ui-selectmenu’).selectmenu({style:’dropdown’}); to init all select boxes onload and then trying to disable the HTML Select element.. no dice. So, here is what I’ve tried:
1) making the HTML select list disabled, doesn’t effect the selectmenu (I tried applying the ‘disabled’ attribute to the HTML element using HTML and via jQuery)
2) Calling each specific select list with the selectmenu function and applying an option like so:
$(’#messaging_recipient_list’).selectmenu({style:’dropdown’}).selectmenu("option", “disable”, true);
3) I’ve also tried to apply the selectmenu disable option like this:
.selectmenu("disable", true);
selectmenu({ disabled: true });
selectmenu(’disable’);

Nothing seems to work.. I cannot seem to be able to disable the selectmenu element.. what I am trying to do is very simple.. depending upon the option chosen in the first of two selectmenu elements.. it will either enable or disable the second selectmenu element..

any input is greatly appreciated and, aside from this very small issue to overcome, I am very impressed with the plugin and how easy it is to skin !!!!
Thanks!

Thanks for the response.. I didn’t include the ‘complete’ code, simply because listing all the ways I had tried it to work would have been unnecessary. Here is ONE of the ways I attempted to use it, by applying attr(’disabled’,true) on the HTML element and disabling the selectmenu element.. but it does not work when using the selectmenu - If I remove the selectmenu and use plain HTML, the select element is disabled. As I stated above, I also tried applying the disabled="disabled" directly in the HTML and not in the JS, in both as well as just using .selectmenu(’disable’); in the JS (along with the other variations listed above..). None work to disable the second selectmenu list.

<p>Sounds like a possible bug to me too ;) Thanks for describing it clearly on github!

</div>
<p class="posted"><a href="#commentNumber227">Comment</a> by

Revive
on 09/13 at 08:51 PM

<div id="commentNumber228" class="commentEntry">

<p>“Disabled attributes on the select element will disable the new component as well.”

This does not seem to work for me. I am using Chrome. I have disabled="disabled" in the select tag. Selectmenu adds ui-selectmenu-disabled and ui-state-disabled to the select tag, but I can still select items from the menu regardless.

I’ve tried everything recommended in this thread.. and we have not been able to disable these selectmenu elements at all.. we’d love to use this plugin in an upcoming SaaS app we are building, however there must be a reliable way to disable the inputs for us to use it at all..
Thanks for all the help in resolving this.. even with all out testing, I’m hoping it’s something we simply over looked (pilot error ;) )
Thanks!

</div>
<p class="posted"><a href="#commentNumber229">Comment</a> by

Revive
on 09/24 at 01:41 AM

<div id="commentNumber230" class="commentEntry">

<p>@Marvin Herbold

<select disabled="disabled" name="speedA" id="speedA"> works nice for me with latest FF and Chrome.

@Revive
Please inform me if it works out for you. Did you check the jQuery forum and bugtracker if this is a known widget factory internal bug?

and that element is NOT disabled.. I’ve tried varying the ‘disabled’ function as noted above as well as disabling the HTML element.. no dice.

What I’m trying to accomplish is very easy, without using this plugin - toggle disable on a second select element based on the value selected in the first select element. I have even tried applying the selectmenu() to the second select list, .. then, on change of the first, destroying and re-calling the function on the second like this:
$(’#messaging_recipient_list’).selectmenu(’destroy’).selectmenu({style: ‘dropdown’}).selectmenu(’enable’);

Which, does not work either. IF I don’t call destroy when making changes to the second select list, on change event of the first select list.. the second list is duplicated by the selectmenu() function.. so using $(’#messaging_recipient_list’).selectmenu({style: ‘dropdown’}).selectmenu(’enable’); on change of the first select list, to enable/disable the second.. just duplicates the second list.. and does not disable/enable it..

</div>
<p class="posted"><a href="#commentNumber231">Comment</a> by

Revive
on 09/24 at 05:24 AM

<div id="commentNumber232" class="commentEntry">

<p>@Revive

Disabled (called from within the widget itself) will _not_ work as its a bug. Only working from outside at the moment. Please see my GitHub issue entry.

So, I have tried applying the disabled attr to the HTML element, through this plugin, both,.. etc. nothing works. If I dont use this plugin, the code works flawlessly just calling $(’#messaging_recipient_list’).attr(’disabled’, ‘disabled’);

Thoughts?

How exactly do I go about ‘fixing’ jQuery UI.js ????

</div>
<p class="posted"><a href="#commentNumber233">Comment</a> by

Revive
on 09/24 at 05:41 AM

<div id="commentNumber234" class="commentEntry">

<p>@Revive

I wont commenting this again and again. ITS NOT WORKING! ITS A BUG. Stop posting your code snippets all over again.

Take a look in jquery.ui.widget.js. If you call the disable method (in any way you posted above, except from outside -> see my GitHub issue entry) it always calls calls the enable method of the jQuery UI widget.js.
Check the jQuery forum and bugtracker if this is a known widget factory internal bug. If not fix it yourself, wait for me to do it or hire someone.

<p>Wow.. thanks for the kind help Felix ;) I know its not working, I’m trying to find out HOW to get it working.. since some others on here have posted that it works for them.. and then you posted this:

“Disabled (called from within the widget itself) will _not_ work as its a bug. Only working from outside at the moment.”

So, what part of applying the ‘disabled’ attribute directly to the HTML element is INSIDE the widget?? You said calling ‘disable’ from within the Widget doesn’t work.. I get that.. what do you mean by ‘within’? Since I cannot get it to work by applying it via hard coded HTML or using JS to apply a disabled attribute to the select element.

I posted the code because you asked me to post clear code.. examples.. so I did. My apologies if this is hindering your ability to help out with the issue, my intention was only to provide a clear use case for anyone who is willing to help out..
Thanks for all your help..

</div>
<p class="posted"><a href="#commentNumber235">Comment</a> by

Revive
on 09/24 at 06:04 AM

<div id="commentNumber236" class="commentEntry">

<p>@Felix - Hello.&nbsp; I have the same thing you do - I have a &lt;select disabled="disabled"&gt; and if I do not use this Selectmenu UI then it renders disabled via the default browser UI, and I can not select any options.&nbsp; This is what I want.

But as soon as I apply the Selectmenu UI it is no longer disabled and I am able to select options. I am not passing in any parameters to Selectmenu. I see that some others are having the same problem.

</div>
<p class="posted"><a href="#commentNumber236">Comment</a> by

Marvin Herbold
on 09/24 at 09:41 AM

<div id="commentNumber237" class="commentEntry">

<p>@Marvin Herbold

Please provide a fully (theoretically) working zip, as I can’t confirm this problem. Please add information about tested browsers too.

@Revive
With within I meant from inside the widget for example via the select callback. Take a look at the GutHub issue which contains a pretty nice example of what the problem is.
Sorry for do not describe this clearly but I wanted a working example as a zip file—this really saves me time. I already be aware of the problem so no more code snippet or example is needed for now.
I still believe this worked some time ago (like parts of the keyboard control and a few other issues) but jQuery core and UI changed and now causing the problems.
Adding disabled to HTML won’t have any effect when selectmenu widget is already initialized.

<p>I followed your link and found an updated ui.selectmenu.js script and downloaded it and tested my website out with it… IT WORKS!&nbsp; I would suggest updating the web links on this page (Under “Grab the Code!") to have the latest code.&nbsp; Something was fixed to make disable work.

Now there is only one minor complaint left about it that I have… when I set style “width=180px;” on the original select tag, after running Selectmenu() on it, the input actually ends up being about 160px wide instead. This makes the width of the select menu not match the width of the other inputs I have near it (text box, etc).

But I am happy now - the disable definitely works with the latest code in your fork at Github.

<p>Having a difficult time creating a selectmenu on the fly, and having the width come out correct.&nbsp; Please see below code or live version at <a href="http://www.villascape.net/testing/selectmenu/selected.html" rel="nofollow">http://www.villascape.net/testing/selectmenu/selected.html</a> Thank you, Michael

<p>After downloading new version of code from github, the disable function is working! Some versions of the download (those above 1.8) do NOT have the selectmenu.js file in them! So, I am using v1.8

Thanks

</div>
<p class="posted"><a href="#commentNumber244">Comment</a> by

Revive
on 10/02 at 08:04 PM

<div id="commentNumber245" class="commentEntry">

<p>@Marvin Herbold

There are still issues with the disable but HTML initiated disable works so far.
The width issue seems to work for me so are you sure it isnt a CSS inflicted problem?
I already asked filament group to update the blog post but they did not do anything except write back to me “add this link to the articel when we get a chance”. What ever that means…

Sorry, there is currently no live demo but it should work as static HTML.
Perhaps its an idea to use the destroy method of the widget before cloning it. You could init the widget after cloning the row.

I don’t know what OS you are running but mousedown (not click, which is mousedown+mouseup) and drag on a menu to expose it’s items, the while continuing to hold down the button roll away from the menu and release the mouse button while _not_ over any part of the menu or it’s items—the menu should close.

ui.selectmenu does not follow this behavior—it stays open, requiring a click (on or off of it) to close

I’ll see what I can do about the option disable—I would like that to work

al;

</div>
<p class="posted"><a href="#commentNumber250">Comment</a> by

al;
on 10/04 at 06:51 PM

<div id="commentNumber251" class="commentEntry">

<p>as regards focus() after selection—this is a problem for me as the ui.selectmenu then captures _all_ keystrokes without allowing them to bubble up

while the ui.selectmenu is focus() I cannot use keyboard keys to close/refresh the window…

-- this is only affecting the visual focus, it’s still capturing keystrokes....

</div>
<p class="posted"><a href="#commentNumber254">Comment</a> by

al;
on 10/05 at 06:50 AM

<div id="commentNumber255" class="commentEntry">

<p>This is missing some significant keyboard functionality.&nbsp; Alt+down/up is standard for opening the drop down.&nbsp; I also noticed that ‘space bar’ does open it, which it shouldn’t. Even when you manually open it, keyboard doesn’t work at all.

@al
I really appreciate your help but its very hard for me to understand your changes here at the blog. Please file the bugs in the above mentioned GitHub issues and see if their were already filed! Code snippets only without any comment or line doesnt really help me.
Please send me a working, fully commented version of your code or (even better!) fork my branch and send me a pull request at Github.

If the <select> has no options (is an empty select) then the selectmenu does not look right. It does not hide the original <select> and instead the selectmenu appears below it.

</div>
<p class="posted"><a href="#commentNumber265">Comment</a> by

Marvin Herbold
on 10/12 at 08:08 PM

<div id="commentNumber266" class="commentEntry">

<p>@Bryan portillo

Are you sure you are using the latest version from GitHub? This already works nicely, no need to change. Please open ticket at GitHub (http://github.com/fnagel/jquery-ui/issues) if you think there is still a problem.

Just forgot to mention that I have tried using IE 8.0 and Chrome 6.0.472.63. Thanks

</div>
<p class="posted"><a href="#commentNumber271">Comment</a> by

Vincenzo
on 10/18 at 08:39 AM

<div id="commentNumber272" class="commentEntry">

<p>@ Felix Nagel

the bug is still present on the updated version.

</div>
<p class="posted"><a href="#commentNumber272">Comment</a> by

Bryan portillo
on 10/18 at 09:08 AM

<div id="commentNumber273" class="commentEntry fg">

<p>Hi all,

A quick update from Filament Group:

Felix Nagel has done some great work in improving this plugin. We’ve updated this post to direct to his Github repository, and we highly recommend you go there for downloads and updates moving forward. The URL is http://github.com/fnagel/jquery-ui/tree/selectmenu

Great plugin!
I have an application and I use this plugin. It working great but I need to change the scroll because it looks ugly. I tried to use this scroll plugin(http://jscrollpane.kelvinluck.com/) with this selectmenu plugin but it doesn’t work correctly. Has anyone tried to use this 2 plugins together?

</div>
<p class="posted"><a href="#commentNumber275">Comment</a> by

D
on 10/22 at 02:49 AM

<div id="commentNumber276" class="commentEntry">

<p>This is a pretty awesome piece of script. just what i was looking for

When I use it with the simplest call $("#selector").selectmenu(); I can see the selectmenu styled as expected but when I click on it to open the select the flyout list does not appear on screen. I have tried with a flat page as well as inside a dialog but the result is almost the same.

Can I have some help to make it working? Thanks a lot!
Pierre

</div>
<p class="posted"><a href="#commentNumber277">Comment</a> by

Pierre
on 10/25 at 10:21 AM

<div id="commentNumber278" class="commentEntry">

<p>@al

Did I miss post/email or did you forgot to mention where to find your branch?

@Vincenzo
Add z-index: 1005 to the .ui-selectmenu-menu. This should fix your problem. You could use my latest commit, too.

@by Bryan portillo
I cant see a problem. Please provide a working demo zip and consider to open a ticket at GitHub.

What can I do to manipulate the options after the plugin has been initialized?
In particular I would like to be able to
- Search for already present options
- Modify an option as selected/unselected
- Remove all the options
Can somebody give some hints on doing this? Thanks to @fnagel for the great job!

</div>
<p class="posted"><a href="#commentNumber284">Comment</a> by

Vincenzo
on 11/14 at 12:37 PM

<div id="commentNumber285" class="commentEntry">

<p>Just to add more info to my previous comment: I am able to do alle those operations on the underlying select element but these would’nt be reflected on the plugin. Thank you.

Finde a problem to display selectmenu in the modal window, dialog window stack on the selectmenu options, so i can’t access them.
I used the css files in the folder themes and the same problem happened.
Anyone can help me?

Problem: i need to perform the selection to the first dropdown TWICE to get the right data, otherwise i get ghe data of the previous selection.
If i disable the recreation of the new unstyled dropdown works fine.

<p>Great job on the select menu but we did run into a problem where it seems to not work when the select menu is called within a tag that is NOT the first JQuery tab. When in the first one it opens properly. When nested into the second or third tab the select is there but the width is set to 1px.

<p>Does the menu support mouseover events at the top level yet?&nbsp; I saw that someone else asked for it but no answer was given.&nbsp; I’d rather have that then having to click the menu to open each subfolder.&nbsp; Thanks.

<p>Felix thanks for the quick reply.&nbsp; What I’m saying is if you hover your mouse over any of the examples above it changes color which is good.&nbsp; What I’m looking for is that the menu opens when you mouse over it.&nbsp; Currently you have to click the menu to get it to open.&nbsp; I hope that explains what I’m looking for.&nbsp; Thanks!

</div>
<p class="posted"><a href="#commentNumber301">Comment</a> by

Curly Joe
on 02/01 at 03:27 PM

<div id="commentNumber302" class="commentEntry">

<p>Hi,

I was able to figure out how to change the font color of the dropdown text box (I changed it in the selectmenu css sheet) but can’t figure out how to change the font color of the dropdown list items. Can you help me?

<p>Is there a way to get a version of this that’s lighter weight? In order for this to work I had to have a different version of JQUERY running on my site (different from the most current build) and the select script was continuously throwing errors every time I hovered over a menu item.

So, I’m wondering:
- Is there a lighter version where all I have to do is include the uil. selectmenu.js file
- Link to the most current version of JQuerry
- One that doesn’t throw tons of errors?

<p>Hi is there a way to use this without using the complete jquery ui fork - more as an independent plugin to the main jquery ui version?

</div>
<p class="posted"><a href="#commentNumber309">Comment</a> by

Lars
on 03/12 at 03:04 PM

<div id="commentNumber310" class="commentEntry">

<p>Am I the only one to think that there are way too many js and css-files to make this work? I´m sure this is a great plugin but the combined size and the many extra http-requests is a deal-breaker for me.

I also would have liked a little better documentation. I found it difficult to figure out which js-files and css-files that I actually have to implement from the package.

<p>Yeah - I agree. It’s pretty intense. I just decided to keep my menus default b/c of the amount of files associated with this plugin.

</div>
<p class="posted"><a href="#commentNumber311">Comment</a> by

James Caruso
on 03/15 at 10:15 AM

<div id="commentNumber312" class="commentEntry">

<p>Way to much files? jQuery Core and UI with its CSS file is needed. Selectmenu widget itself needs a single JS file and a CSS file: <a href="http://jsfiddle.net/fnagel/hsn95/embedded/result/" rel="nofollow">http://jsfiddle.net/fnagel/hsn95/embedded/result/</a>

Please note that my repo is a fork of the jQuery Git repo. You could download the original jQuery (with UI !) form jquery.com and add the ui.selectmenu.js file and its CSS file selectmenu.css form my fork.

Obviously JS and CSS resources should be combined and minified—thats a common best practice. Perhaps you should find someone who is more familiar with frontend development.

<p>This kills the select function for iphone and ipad. you’ll have to script it out if your using mobile safari

</div>
<p class="posted"><a href="#commentNumber317">Comment</a> by

Jon
on 03/21 at 05:22 AM

<div id="commentNumber318" class="commentEntry">

<p>Great stuff, thanks!

I’m just trying this for the first time and it works so far, however for me the popup menu always appears in the top left corner, no matter where the select element is placed. My code is simply “$(’select’).selectmenu();”.
I looked at the sample code, but couldn’t find out what makes the difference.

<p>Thanks for the wonderful plugin. I have some typical requirement in my work.

The requirement is to expand/collapse the Optgroup items.
Is it possible.

Thanks in advance

</div>
<p class="posted"><a href="#commentNumber320">Comment</a> by

Raj
on 04/08 at 06:10 AM

<div id="commentNumber321" class="commentEntry">

<p>@Raj

This is currently not possible. You are welcome to open a feature request at GitHub but Im currently pretty busy and there’s need to fix a couple of bugs, so please be patient. by the way: it’s possible to sponsor features :-)

It works but i also need to change option items in the first menu. (i don’t need to add option, just need to rename them). To do this i used the ‘destroy’ method and then replacewith… It works too.

However when my menu is repopulated the fourth item doesn’t active the second menu anymore… i suppose this is because i destroyed and recreated the first one.. Is it possible to rename options item without destroying the menu ? How can i keep my .change function active after having repopulated the menu ?

Thanks !

</div>
<p class="posted"><a href="#commentNumber324">Comment</a> by

Abspirit
on 04/18 at 01:17 PM

<div id="commentNumber325" class="commentEntry">

<p>@Abspriti

Please visit GitHubs issues for getting help.

Please take a look in the Wiki and look for the disable / enable method and the add / delete / modify options topics:https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Additionally lease use the latest version as Ive fixed some issues with the disable / enable functionality.

<p>I tried to put these custom select, but there was a problem. Scroll and scroll arrows do not work on Firefox. This forced me to remove them. I want to ask when it will be fixed this bug, so I can put them back into your site.

<p>I’ve downloaded the code from <a href="http://github.com/fnagel/jquery-ui" rel="nofollow">http://github.com/fnagel/jquery-ui</a> (1.9m2.zip) and any of the files from archive doesn’t have a declaration of the ‘selectmenu’ method.

<p>HI, this JQuery componeny looks great on browser when compared to traditional html select box. But I have issues in selecting and clearing value from select box. I see the selected value remains and not getting cleared. Pls suggest me the solution if we have one aleady. Thanks in advance.

I am using this line to code for jq select box
$(’select#xyz’).selectmenu({style:’dropdown’});

Thanks for your contribution but please post patches and bug reports to the bugtracker at GitHub: https://github.com/fnagel/jquery-ui/issues/
Please open a single thread for every issue. This will help me and others to test and implement your code.

<p>@Felix: yes i downloaded the last version. Can’t find docs regarding different type-ahead. I’ll try to better explain the problem: you can check it by typing “faste” on the first select you show in this page (Default: “popup” Style on quick demo section). If you type F then A then the “Fast” option is suggested, but when you press also S, then “Slow” option is selected, while on a native html select you would have Fast option higlighted because it match F-A-S char sequence.

</div>
<p class="posted"><a href="#commentNumber345">Comment</a> by

andretti1977
on 06/15 at 10:28 AM

<div id="commentNumber346" class="commentEntry">

<p>@andretti1977

What do you mean by finding docs?
This should be working and we did tests when releasing v1.1. In which browser did you tried to type ahead?
Please open a new issue at GitHub if the problem persists: https://github.com/fnagel/jquery-ui/issues/

<p>I’m sorry, maybe i was doing something wrong beacuse when i downloaded again all v1.1 zip i could test on the demo page and it worked the right way. But this website page doesn’t work, so i must assume this page doesn’t implement version 1.1, is it correct?

</div>
<p class="posted"><a href="#commentNumber347">Comment</a> by

andretti1977
on 06/15 at 11:24 AM

<div id="commentNumber348" class="commentEntry">

<p>@andretti1977

No problem :-) GitHubs download functionality could be confusing for new users.
Correct, this blog post uses the latest version of Selectmenu widget developed by the Filament Group.

click on Run and then click “AAA” link in the result window: you will see a (not styled) dialog and if you click on “Tutti clienti del” (which is the select) you will notice that page breaks and you can’t select options. This is due to modal dialog.
If you set false to the modal property
...
...
$( “#test-dialog” ).dialog({
autoOpen: false,
//width: 700,
//resizable: false,
modal: false,
buttons: {
...
...
in html window, you will be able to run again the test without any problem.

So the bug happens when you embed a selectmenu in a jqueryUI modal dialog under IE 7-8 (9 works!). Can you suggest me a fix, because i’m near to a production deploy ;)

<p>Hi, seems i solved the problem. Well, i identified the problem and then commenting that command everything worked well, so this is half a solution because i can’t understand why that command generated the problem :)