jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

Posted by Scott on 06/19/2009

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.

What does it do?

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.

A Quick Demo

The following demo shows a variety of the features currently supported in the selectmenu plugin.

jQuery UI Labs Selectmenu plugin demo by Filament Group


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).
  • Different menu types Popup or dropdown
  • jQuery UI Widget-factory-driven Built using the standard jQuery UI widget pattern for creating widget instances.
  • ThemeRoller-Ready Full theming support using jQuery UI ThemeRoller
  • 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

Options and Configuration

The following options are available in this widget:

  • transferClasses: true, transfer classes from select
  • style: ‘popup’, also available: ‘dropdown’
  • width: null, defaults to select width, accepts a number
  • menuWidth: null, sets menu body separately. accepts a number
  • 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


Using the plugin is as simple as addressing a select element on your page and calling “selectmenu()” method on it. Like this:


Beyond that, you can utilize the options mentioned above using the same conventions followed by all other jQuery UI plugins.

Grab the code!

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.

Help us plan this widget!

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).



<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 class="posted"><a href="#commentNumber1">Comment</a> by

Andrew Rodgers on 06/19  at  02:22 PM

<div id="commentNumber2" class="commentEntry">
<p>Once again, you have done a great job. Thanks for your efforts and contribution to the community.

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

W3Avenue Team on 06/19  at  02:35 PM

<div id="commentNumber3" class="commentEntry">
<p>Very nice!

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

Nikola on 06/19  at  02:58 PM

<div id="commentNumber4" class="commentEntry">
<p>Scott, this is really awesome. I can’t thank you enough! This will be most useful for me.

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

Richard on 06/19  at  08:54 PM

<div id="commentNumber5" class="commentEntry">
<p>You know i have to say, that the jQuery and jQuery-UI projects have taken web development, and AOP as well as delivery ease and time lines to a whole new level.

I’m addicted!

thank you so much!

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

James van Leuvaan on 06/19  at  11:11 PM

<div id="commentNumber6" class="commentEntry">
<p>Damn this is neat stuff. Great work!

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

Jerome Bohg on 06/21  at  03:12 PM

<div id="commentNumber7" class="commentEntry">
<p>very nice! reponse for F4 key?

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

Gesiel Mota on 06/22  at  12:35 PM

<div id="commentNumber8" class="commentEntry">
<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?

    <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

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

Charlie Davey on 07/14  at  05:25 AM

<div id="commentNumber10" class="commentEntry">
<p>It does not work in UI dialog.

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

Haiping Chan on 07/21  at  04:21 AM

<div id="commentNumber11" class="commentEntry">
<p>Forgot to say you’ve got your first digg vote for this post. ;)

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

Vito Botta on 07/21  at  04:33 AM

<div id="commentNumber12" class="commentEntry">
<p>I don’t know why but the first comment didn’t go through. BTW I had just said thank you :D

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

Vito Botta on 07/21  at  04:33 AM

<div id="commentNumber13" class="commentEntry">
<p>That is an awesome piece of work!

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

Richard@Home on 07/22  at  09:09 AM

<div id="commentNumber14" class="commentEntry">
<p>Good stuff!

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?

    <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 ;)

    <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.

.selectmenu(’destroy’) //destroy the custom select menu
.replaceWith(’<select>......</select>’) //rebuild the select element
.selectmenu(); //regenerate the custom select menu

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).

    <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.

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

R7S on 07/23  at  02:08 PM

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

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?

    <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

    <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?

    <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!

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

Paul Gardner on 07/24  at  01:53 AM

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

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.


    <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?



    <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;

Within body, I then have a

<[customnamespace]><select id=’selectmenu’></select</[customnamespace]>
<[customnamespace] id=’generatedobjs’></[customnamespace]>


Is there a better way to do this?

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

Nate on 07/26  at  10:40 AM

<div id="commentNumber25" class="commentEntry">
<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
- 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.



    <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 :)

    <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}

    <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

    <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?

    <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">

Its a utf-8 character which looks like a white space. :-)

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

antu on 08/17  at  05:03 PM

<div id="commentNumber31" class="commentEntry">
<p>I think the blog software replaced it somehow (or it really just works on my site^^)

Replace the _ with this: & # x 2 0 5 F ;

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

antu on 08/17  at  05:05 PM

<div id="commentNumber32" class="commentEntry">
<p>How does one set a selected element?

If I use the .val(value) then the option element is selected but the display span isn’t. It still defaults to the first option element.

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

Darrin on 08/18  at  06:28 PM

<div id="commentNumber33" class="commentEntry">
<p>Solved the display problem.

I needed to set the selected item first and then apply the selectmenu.

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

Darrin on 08/19  at  07:16 PM

<div id="commentNumber34" class="commentEntry">
<p>How do you dynamically set the selected element?

I tried to use
This seems to change the value of the html select but not the display name in the <span> tags
Am I doing something wrong?

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

Kris on 08/24  at  10:42 AM

<div id="commentNumber35" class="commentEntry fg">
<p>@Kris: Use the selectmenu method to address the control once you’ve built it.


4 would be the index number of the option in the select (0-based).

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

Scott (Filament) on 08/24  at  10:50 AM

<div id="commentNumber36" class="commentEntry">
<p>I’m a jQuery newbie and having trouble with IE7. Everything is fine until I add modifications. Once I do, all jQuery is broken, yet there are no error messages.

This is fine:


This breaks:

menuWidth: 102,

Can anyone point out what I’m getting wrong or give me a clue as to what I need to track down? I did change the CSS quite a bit…


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

Lise on 08/24  at  12:10 PM

<div id="commentNumber37" class="commentEntry fg">
<p>@ Lise: could it be the trailing comma? Try removing the comma after 102 in your code example.

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

Scott (Filament) on 08/24  at  12:21 PM

<div id="commentNumber38" class="commentEntry">
<p>Of course! I even read that the trailing comma was often the culprit but failed to make the connection. Thank you!!!!

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

Lise on 08/24  at  12:26 PM

<div id="commentNumber39" class="commentEntry">
<p>try to name the select menu

<select name="mySelect" id="mySelect">
<option value="0">Some text</option>

menuWidth: 102,

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

Kris on 08/24  at  12:31 PM

<div id="commentNumber40" class="commentEntry">
<p>Thanks Kris - I did originally name it. I just stripped out everything extra while I was trying to isolate the problem. Thanks for reminding me I need to put the ID back in!

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

Lise on 08/24  at  12:34 PM

<div id="commentNumber41" class="commentEntry">
<p>your link “Grab the code!” section to the google server is broken need to add an “l” to the end of the link

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

Greg Wilker on 08/25  at  10:11 AM

<div id="commentNumber42" class="commentEntry fg">
<p>@Greg Wilker, thanks for the note, the link is fixed now.

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

Maggie (Filament) on 08/25  at  10:17 AM

<div id="commentNumber43" class="commentEntry">
<p>for the optGroup error, change this..

line 163:

var optGroupName = self.widgetBaseClass + ‘-group-’ + selectOptionData.parentOptGroup;

change for this

var optGroupName = self.widgetBaseClass + ‘-group-’ + selectOptionData.parentOptGroup.split(’ ‘).join(’’);
    <p class="posted"><a href="#commentNumber43">Comment</a> by

el chivo on 08/26  at  06:23 PM

<div id="commentNumber44" class="commentEntry">
<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.

    <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){

for(var i=0; i<selectOptionData.length; i++){

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

nico on 09/04  at  09:18 PM

<div id="commentNumber46" class="commentEntry">
<p>@Brandon ( <a href="http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber45" rel="nofollow">http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber45</a> )

Try to first show the select, then apply .selectmenu, then hide it back.

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

sompylasar on 09/06  at  07:48 AM

<div id="commentNumber47" class="commentEntry">
<p>Has anyone figured out a workaround to make the selectmenu work within a UI Dialog (or jqModal Dialog)?

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

Jason Karns on 09/08  at  03:17 PM

<div id="commentNumber48" class="commentEntry">
<p>@el chivo:

this is correct version:

line 163:

var optGroupName = self.widgetBaseClass + ‘-group-’ + selectOptionData.parentOptGroup.split(’ ‘).join(’’);

(index was missing)

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

ReTox on 09/11  at  07:33 AM

<div id="commentNumber49" class="commentEntry">
<p>Awesome plugin.

Two support more than one word for optgroups you need make this change.(solution to ReTox problem)

var optGroupName = self.widgetBaseClass + ‘-group-’ + selectOptionData.parentOptGroup;
replace 164 line with
var optGroupName = self.widgetBaseClass + ‘-group-’ + selectOptionData.parentOptGroup.replace(/\s+/,"_");

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

Subba Rao Pasupuleti on 09/21  at  01:45 PM

<div id="commentNumber50" class="commentEntry">
<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....


    <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

    <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 :)

    <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:

-Select group
-Select group

    <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.

Replace the line 209 of the source, where you read:

var selectWidth = this.element.width();


var clonedSelect = this.element.clone().appendTo(’body’);
var selectWidth = clonedSelect.css({ position: “absolute”, visibility: “hidden”, display: “block” }).width();

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!

    <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.


    <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:

$("<li><a href=\"#\" tabindex=\"-1\" role=\"option\" aria-selected=\"false\">" + selectOptionData.text + “</a></li>").data("index", i).addClass(selectOptionData.classes).data("optionClasses", selectOptionData.classes) is undefined

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

Stephen Young on 10/14  at  09:59 PM

<div id="commentNumber57" class="commentEntry">
<p>After removing this line:

.data(’optionClasses’, selectOptionData.classes)

The plugin works.

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

Stephen Young on 10/15  at  09:32 PM

<div id="commentNumber58" class="commentEntry">
<p>Im actually using this selectmenu style on my website and it works GREAT!

Thanks for spending time on doing all this great utilites.

    <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.

    <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!

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

Relogio de Ponto on 11/13  at  02:36 PM

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

How can I disable/enable selectmenu dynamically?

Looks like $(’#s’).attr(’disabled’, ‘disabled’); works only after destroy + recreation.


url: ‘/search/get-models’,
data: {brand: $(this).val()},
beforeSend: function() {
.attr(’disabled’, ‘disabled’)
success: function(response) {

works ok, disable element before send and enable on complete. Is there away around this, not to rebuild selectmenu every time I enable/disable select?

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

umpirsky on 11/18  at  09:47 AM

<div id="commentNumber62" class="commentEntry fg">
<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:

disable: $(’select’).selectmenu(’disable’);
enable: $(’select’).selectmenu(’enable’);

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

Scott (Filament) on 11/18  at  10:27 AM

<div id="commentNumber63" class="commentEntry">
<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:

var brand = $(’#brand’);
var classes = new Array();
brand.find(’option’).each(function(i, item) {
classes.push({find: ‘.’ + $(item).attr(’class’).split(’ ‘).shift()});
maxHeight: 315,
width: 200,
style: ‘dropdown’,
icons: classes

one option looks like:

<option class="car-brand-2-icon car-brand-icon-background” label="Alfa Romeo” value="2">Alfa Romeo</option>

there are around 90 options.

Is there a better (read faster) way to do this?

Agan, thx very much for your help!

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

umpirsky on 11/19  at  07:06 AM

<div id="commentNumber64" class="commentEntry">
<p>@Scott And another thing I noticed: in line #18

var num = Math.round(Math.random() * 1000);
this.ids = [this.element.attr(’id’) + ‘_’ + ‘button’ + ‘_’ + num, this.element.attr(’id’) + ‘_’ + ‘menu’ + ‘_’ + num];

is this really necesarry?

I guess you added that to avoid id collision, but on the other hand, it’s hard to select elements.

I replaced it with just:

this.ids = [this.element.attr(’id’) + ‘_’ + ‘button’, this.element.attr(’id’) + ‘_’ + ‘menu’];

With default implementation I couldnt select a tag with CSS id selector, because it’s random :)

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

umpirsky on 11/20  at  06:24 AM

<div id="commentNumber65" class="commentEntry">
<p>I’ve integrated ui selectmenu plugin on a form who used 3 selects

lists (each converted in span with selectmenu plugin).

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 ?

Example :


$(’select#select1’).bind(’change’, function(){
$(’select#select2’).selectmenu({ HOW CAN I CALL
refreshValueMethod ??? });

Thanks in advance for your advice.

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

Samuel Maulaz on 11/30  at  02:30 AM

<div id="commentNumber66" class="commentEntry">
<p>@Samuel Maulaz Please read comments above, we talked about that.

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

umpirsky on 11/30  at  02:38 AM

<div id="commentNumber67" class="commentEntry">
<p>So, if I understand what I must do, the logical way is to disable and enable after the select option values have been regenerated ?

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

Samuel Maulaz on 11/30  at  02:43 AM

<div id="commentNumber68" class="commentEntry">
<p>@Samuel Maulaz A kind of, here is the example:

url: ‘/search/get-options’,
beforeSend: function() {
success: function(response) {

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

umpirsky on 11/30  at  02:50 AM

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

I’ve correct my codes with your advice.

I destroy the selectmenu and after regenerate the select option, re-init the selectmenu.

Thank you for your informations.

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

Samuel Maulaz on 11/30  at  04:52 AM

<div id="commentNumber70" class="commentEntry">
<p>@Samuel Maulaz NP ;)

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

umpirsky on 11/30  at  05:31 AM

<div id="commentNumber71" class="commentEntry">
<p>This is an awesome plugin.&nbsp; Going to save me all kinds of headaches I would of had originally.&nbsp; Great work!

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

Morgan Craft on 11/30  at  02:59 PM

<div id="commentNumber72" class="commentEntry">
<p>Ditto what nico said up there. There’s a for ... in loop in the code that breaks with Prototype.js

Right around line 135 it can use some of this:

// quit on the bad protoype native Array augmentations. 
if (!selectOptionData.hasOwnProperty(i)) continue;

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

Paul Irish on 12/03  at  10:54 PM

<div id="commentNumber73" class="commentEntry">
<p>Dear all

I do install this plug-in http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

which is do SelectBox replacement

but it have some problems when in special cases we include a prototype lib .
the UI list will put a lot of UNDEFIND item in the list

PS :  I do change all “$” marks to jQuery in the ui.selectmenu.js and i did put the “ jQuery.noConflict(); “ to deal with other lib , in may case Prototype

to fix this :

please find :

var thisLi = jQuery(’<li>‘+ selectOptionData.text +’</li>’)

put before of this line :

if (!selectOptionData.hasOwnProperty(i)) continue;

Thanks for paul_irish from #jquery on MIRC , he found the solution :)

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

Linda_Hoxman on 12/03  at  11:23 PM

<div id="commentNumber74" class="commentEntry">
<p>Hello , thank you for this add on .

but there is a small bug
if you click on the menu . then scroll by mouse , the menu will remain open

to fix this


//document click closes menu

add after :


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

beshoo on 12/07  at  02:09 AM

<div id="commentNumber75" class="commentEntry">
<p>Has anyone managed how to style other elements in form, like textareas and input fields? Look vierd if you try to style them like this selectmenu :(

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

umpirsky on 12/07  at  04:45 PM

<div id="commentNumber76" class="commentEntry">
<p>One question, how do you add new elements to this dynamically?&nbsp; Example, this works with regular select tags:

$(’#speedC option[value=’ + val + ‘]’).attr(’selected’, ‘selected’);

But now that I added the selectmenu class into the code, it now generates an error.

Is there a way to programmaticlly add elements to this?


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

Andy H on 01/13  at  12:38 PM

<div id="commentNumber77" class="commentEntry">
<p>@Andy Please read previous comments.

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

umpirsky on 01/13  at  01:15 PM

<div id="commentNumber78" class="commentEntry">
<p>Hmm, I might be overlooking it, but I don’t see it up there.&nbsp; Could you say who posted this and on what date?

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

Andy H on 01/13  at  03:12 PM

<div id="commentNumber79" class="commentEntry">
<p>Maybe I’m not doing it right… trying to add a callback to submit the form upon selecting the option:

style: ‘dropdown’,
change: function () {

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

Colin on 01/18  at  06:33 PM

<div id="commentNumber80" class="commentEntry">
<p>@Andy Check Comment by Scott (Filament) on 07/23  at  01:26 PM

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

umpirsky on 01/19  at  02:03 AM

<div id="commentNumber81" class="commentEntry">
<p>A few comments

- The UI control should be bound to the dropdownlist, so that a change to either one should be able to notify the other one.

- Lots of JS bugs in the code:

Error: selectOptionData[this._selectedIndex()] is undefined
Source File: http://localhost/BppUI/Scripts/ui.selectmenu.js
Line: 291

^This is when MVC puts in a <option value=""></option> on a dropdown list.

Error: this.newelement is undefined
Source File: http://localhost/BppUI/Scripts/ui.selectmenu.js
Line: 108

Error: this._refreshValue is not a function
Source File: http://localhost/BppUI/Scripts/ui.selectmenu.js
Line: 107

If you unhide the select and make a few interactions.

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.


    <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).

Demo is located here: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
Let us know what you find.

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

Scott (Filament) on 01/21  at  08:06 AM

<div id="commentNumber83" class="commentEntry">
<p>Nice work! Thanks.

Is it just me, or does the demo css say “.ui-select-menu”, and it should be “.ui-selectmenu” instead? The latter works better for me. ;)

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

m on 01/21  at  08:03 PM

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

This plugin works perfect with jqueryui 1.7.2.

But I have updated to 1.8b1 recently, and selectmenu looks a bit odd, please look at screenshots

jqueryui 1.7.2 http://www.screencast.com/users/umpirsky/folders/Jing/media/941049f8-bff4-42cc-8997-4a6662b8f50a
jqueryui 1.8b1 http://www.screencast.com/users/umpirsky/folders/Jing/media/5f0f7e3c-28bf-4f52-b904-df2225b76c23

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

umpirsky on 01/25  at  05:32 AM

<div id="commentNumber85" class="commentEntry">
<p>Also, after update to jqueryui  1.8b1,

$(’#id’).selectmenu(’disable’); wont work!

Sasa Stamenkovic.

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

umpirsky on 01/25  at  08:07 AM

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

This is Amazing....

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

Neeraj Sahu on 01/28  at  04:41 AM

<div id="commentNumber87" class="commentEntry">
<p>Following up on the @Kris thread regarding dynamically setting the selected element.&nbsp;

Any thoughts on how would you distinguish between the default selected element and the element displayed in form field as instruction to the user?

For example, the user sees ‘year of birth’ in the field upon loading the form and then when selecting the dob element, the field defaults to a particular year.

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

rylan on 02/03  at  02:09 PM

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

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); }

and it isn’t defined really.

Code before my fix:
//transfer tabindex
if(this.element.attr(’tabindex’)){ this.newelement.attr(’tabindex’, tabindex); }

Code after my fix:
//transfer tabindex
if(tabindex = this.element.attr(’tabindex’)){ this.newelement.attr(’tabindex’, tabindex); }

Please Scott, verify and add it in trunk.

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

umpirsky on 02/13  at  10:03 AM

<div id="commentNumber89" class="commentEntry">
<p>Is this broken with 1.4?

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

TomC on 02/16  at  02:01 PM

<div id="commentNumber90" class="commentEntry">
<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 !

    <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.

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

David Radcliffe on 02/17  at  10:54 AM

<div id="commentNumber92" class="commentEntry">
<p>When SELECT is inside a div with overflow:scroll, the script makes extra space at the bottom of the page; see this page:


If I scroll the div to the bottom of it, then I initialize the SELECT it is no problem… is there another way to get rid of that extra space?

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

Dave on 02/18  at  04:36 AM

<div id="commentNumber93" class="commentEntry">
<p>@Dave I have same problem. I cant say if the reason is overflow, but space at the bottom of the page is there.

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

umpirsky on 02/18  at  05:11 AM

<div id="commentNumber94" class="commentEntry">
<p>Nice work!

But it seems to work well only with font-size:62.5%;on body tag,
with any other value (pt, em, but also different percentages) the popup style is not aligned…


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

amperini on 02/19  at  08:26 AM

<div id="commentNumber95" class="commentEntry">
<p>Hmmm.. Shouldn’t the functionality of form elements be up to the browser?

For example, this kills the select that appears on the iPhone (and soon the iPad) that is most suitable for that platform.

Seems to me to break some simple rules of markup.

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

Matt Tew on 02/23  at  04:18 PM

<div id="commentNumber96" class="commentEntry fg">
<p>@Dave,David: Thanks. That’s probably a result of hiding with visibility rather than display. We’ll look into it.

@amperini: Nice catch. We’ll probably need to update the positioning to convert px values to ems to accommodate that.

@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.

    <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.

    <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.

    <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 class="posted"><a href="#commentNumber99">Comment</a> by

umpirsky on 02/24  at  02:07 AM

<div id="commentNumber100" class="commentEntry">
<p>it  doesnt work correctly in IE 6-7 (same as this site) and its very wistful

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

Sergey on 02/27  at  03:57 AM

<div id="commentNumber101" class="commentEntry">
<p>No solutions or workarounds found yet about this FF 3.6 bug of scroll when a max height is set ?

thank you…

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

Lyne Boucher on 02/27  at  04:53 AM

<div id="commentNumber102" class="commentEntry">
<p>Great stuff!

Is there a way to disable an option item?

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

Thilo on 03/02  at  06:20 AM

<div id="commentNumber103" class="commentEntry">
<p>Works great, but doesn’t seem to respond to form.reset() .....

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

Justin on 03/03  at  01:24 PM

<div id="commentNumber104" class="commentEntry">
<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.

    <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.

Online demo http://www.automobi.li/ “Lokacija”, “Gorivo” and “Sortiraj po”.

HTML looks ok, but for some reason javascript evaluates it to undefined.

Please help!

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

umpirsky on 03/08  at  04:12 PM

<div id="commentNumber106" class="commentEntry">
<p>Figured it out.

If you need to use reset(), you have to call $(’#mySelect’).selectmenu(’destroy’); after the reset call, and then re-initialize it.

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

Justin on 03/08  at  04:32 PM

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

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 class="posted"><a href="#commentNumber107">Comment</a> by

Robert Hallatt on 03/09  at  04:29 PM

<div id="commentNumber108" class="commentEntry">
<p>This plugin has support for multiple selects???

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

Lucas Martins on 03/10  at  02:06 PM

<div id="commentNumber109" class="commentEntry">
<p>A reply to my problem would have been appreciated.

No one seems to have this problem, as no one commented about it except me. But what can I do?

There is 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.

It would bug me alot to have to use another plugin to skin my comboboxes.

Thank you.

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

Lyne Boucher on 03/10  at  02:46 PM

<div id="commentNumber110" class="commentEntry">
<p>@Lyne Boucher Any online demo?

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

umpirsky on 03/10  at  02:52 PM

<div id="commentNumber111" class="commentEntry">
<p>Yes the demo on this page ... This one : Default: “popup” Style with maxHeight set, don’t work for me.

I just cannot click on the arrows and the mid scrolls (i noticed that both scrolls don’t work when width is set, too)

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

Lyne Boucher on 03/10  at  03:00 PM

<div id="commentNumber112" class="commentEntry">
<p>I love this plugin!!!

Is there a new version that works with jQuery 1.4 and UI 1.8 I am getting errors when I use it on IE8

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

Dave on 03/10  at  09:41 PM

<div id="commentNumber113" class="commentEntry">
<p>I am having the same problem as Lyne Boucher.

When you apply a maxHeight, you cannot click on the ‘inner’ part of the vertical scroll or the up/down buttons.

Help would be appreciated.

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

Saddam Azad on 03/23  at  11:58 AM

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

How do I get the value of a selected element? I’m using FF & IE. After I selected an item the ‘selected’ property at the dropdown isn’t updated? How can I access the selected value?


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

washi on 03/24  at  06:42 AM

<div id="commentNumber115" class="commentEntry">
<p>i had a lot of undefined selections if i use prototype + jquery together.

this little workaround helps you. After
//write li’s
for(var i in selectOptionData){

add this line

if ((typeof selectOptionData) != “object") continue;

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

nobody on 03/24  at  10:54 AM

<div id="commentNumber116" class="commentEntry">
<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>

Rename method _init to _create
Rename method _setData() to _setOption()

Move options and event prefix declaration into the widget, the first lines of your widget should now look like:

$.widget("ui.selectmenu", {
widgetEventPrefix: “selectmenu”,
options: {
transferClasses: true,
style: ‘popup’,
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null,
errorClass: ‘ui-state-error ui-selectmenu-error’
_create: function() { ... etc etc ...

And update the options declaration at the bottom of the file to be simply:

$.extend($.ui.selectmenu, {
version: “@VERSION”

Lastly I made sure the destroy method returned an instance of “this”, though I’m not sure this is even required.

It was quite simple after I RTFM and examined other widgets in the 1.8 release.

I’ve not fully tested yet but all seems fine now. I’ll post any further findings if they arise.

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

Steve Esson on 03/24  at  12:14 PM

<div id="commentNumber117" class="commentEntry">
<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?

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

Gabriel Falkenberg on 03/25  at  07:00 AM

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

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

Keep on doing the great job guys! It’s amazing

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

Philippe on 03/30  at  07:22 AM

<div id="commentNumber119" class="commentEntry">
<p>Still the same like @Lyne Boucher

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 !


    <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”.

On the home page, I have same form, but everithing looks nice http://automobi.li/.

Any idea?

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

umpirsky on 04/16  at  06:29 AM

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

I am testing the new jQuery UI 1.9pre… I got in github....

This plugin is not working with that using internet explorer....


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

Gabriel on 04/16  at  11:05 PM

<div id="commentNumber122" class="commentEntry">
<p>Small arrows to scroll not working on Mozilla. How can I fix this problem.

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

Todor on 04/21  at  08:23 AM

<div id="commentNumber123" class="commentEntry">
<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 class="posted"><a href="#commentNumber123">Comment</a> by

Wilson R on 04/21  at  03:05 PM

<div id="commentNumber124" class="commentEntry">
<p>Thanks! I’ve been looking for a plugin like this for days.. I’m gonna try it right now.

And congrats for your new book! it will be my next purchase

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

Angela on 04/24  at  06:17 PM

<div id="commentNumber125" class="commentEntry">
<p>Disabling selectmenu stopped working after upgrade to ui 1.8.

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

umpirsky on 04/24  at  06:19 PM

<div id="commentNumber126" class="commentEntry">
<p>@Lyne Boucher and others who couldn’t get the scrollbar arrows to work in Firefox:

Comment out the following lines:

//this allows for using the scrollbar in an overflowed list
this.list.bind(’mousedown mouseup’, function(){return false;});

Comment out the following:

//document click closes menu

Add the following:


I hope this helps!

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

Arnell D on 04/27  at  10:34 AM

<div id="commentNumber127" class="commentEntry">
<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:

var changed = $(this).data(’index’) != self._selectedIndex();
if(changed){ self.change(event); }
return false;
var changed = $(this).data(’index’) != self._selectedIndex();
if(changed){ self.change(event); }
return false;

Can you please confirm this behaviour and this solution?



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

Roberto Rossi on 05/03  at  08:40 AM

<div id="commentNumber128" class="commentEntry fg">
<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.

    <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.

We will be awaiting for the new jQuery UI select menu.

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

Roberto Rossi on 05/03  at  08:55 AM

<div id="commentNumber130" class="commentEntry">
<p>I am using select menus in an advanced search panel. On that page I have two arrow images to navigate to the next or previous result page.

These arrows are placed in a div and this one has a z-index which makes it not possible to click on the closed select menu to open it (IE8).

It is possible to click the link in the menu to open it but not by clicking on the full select bar.

As the select element gets set to display:none; I am wondering if there is a way to give it a higher z-index?

I would appreciate your help.

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

Thilo on 05/04  at  01:34 AM

<div id="commentNumber131" class="commentEntry">
<p>To fix the “Uncaught exception: TypeError: Cannot convert ‘selectOptionData[this._selectedIndex()]’ to object” error  to Display the Current Selected Item

Change Line 291

this.newelement.prepend(’<span class="’+self.widgetBaseClass+’-status">’+ selectOptionData[this._selectedIndex()].text +’</span>’);


this.newelement.prepend(’<span class="’+self.widgetBaseClass+’-status">’+ this._selectedIndex() +’</span>’);

this Works with jQuery 1.4.2 and jQuery UI 1.8

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

Ingo Herbote on 05/07  at  09:58 AM

<div id="commentNumber132" class="commentEntry">
<p>&gt; Also, after update to jqueryui 1.8b1,

> $(’#id’).selectmenu(’disable’); wont work!

does anybody know howto fix this? It would be great to have the disable-function back!

Many thanks in advance

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

Andreas on 05/11  at  05:56 PM

<div id="commentNumber133" class="commentEntry">
<p>@Andreas - have you tried using the default method of setting a property on a jQuery UI widget?

e.g. $( “.selector” ).selectmenu({ disabled: true });

I haven’t tried this but might be worth a go. RTM for using getters and setters on the properties e.g. http://jqueryui.com/demos/accordion/#options

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

Steve Esson on 05/12  at  03:17 AM

<div id="commentNumber134" class="commentEntry">
<p>@Steve: no, this doesn’t work.

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

    <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 class="posted"><a href="#commentNumber135">Comment</a> by

Andreas on 05/12  at  04:45 AM

<div id="commentNumber136" class="commentEntry">
<p>@Andreas - see my earlier post  for more changes you’ll need to make: <a href="http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber116" rel="nofollow">http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber116</a>

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

Steve Esson on 05/12  at  07:10 AM

<div id="commentNumber137" class="commentEntry">
<p>@Steve: Great =&gt; Thank you!

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

Andreas on 05/12  at  12:21 PM

<div id="commentNumber138" class="commentEntry">
<p>What about select boxes with multiple attribute?

I guess it doesn’t support it, right?
It would be great if it does…

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

Rauf on 05/18  at  03:16 AM

<div id="commentNumber139" class="commentEntry">
<p>Disable/enable don’t work any more!

disable: $(’select’).selectmenu(’disable’);
enable: $(’select’).selectmenu(’enable’);

jQuery v1.4.2
jQuery UI 1.8.1

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

umpirsky on 05/18  at  02:13 PM

<div id="commentNumber140" class="commentEntry fg">
<p>@umpirsky: check a few comments before yours. I think @Andreas has you covered.

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

Scott (Filament) on 05/18  at  02:16 PM

<div id="commentNumber141" class="commentEntry">
<p>@Scott Thank you very much for the answer, but unfortunatelly,

$(’#select’).selectmenu(’option’, ‘disabled’, true); didn’t work for me :(

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

umpirsky on 05/18  at  02:29 PM

<div id="commentNumber142" class="commentEntry">
<p>@Scott And $(’#select’).selectmenu({disabled: true}); cloned (doubled) the selectmenu!

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

umpirsky on 05/18  at  02:32 PM

<div id="commentNumber143" class="commentEntry fg">
<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 class="posted"><a href="#commentNumber143">Comment</a> by

Scott (Filament) on 05/18  at  02:46 PM

<div id="commentNumber144" class="commentEntry">
<p>@Scott I have tried, and don’t work again.

I repeat, I use

jQuery v1.4.2
jQuery UI 1.8.1

Thanks for the answer!

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

umpirsky on 05/19  at  01:20 AM

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

I also Use jQuery 1.4.2 and jQuery UI 1.8.1

I did everything described here:

and can use:
$(’#mySelect’).selectmenu("option", “disable”, true);

$(’#mySelect’).selectmenu(’disable’); did NOT work for me either!

The Selectmenu get’s also disabled if your select element has an attribute disabled="disabled" before running .selectmenu().

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

Andreas on 05/19  at  01:37 AM

<div id="commentNumber146" class="commentEntry">
<p>@Andreas Thanks, that worked like a charm.

After this changes I’m able to disable it with


Now I need to test this further. Why we don’t include this into svn vrsion and officially support ui 1.8?

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

umpirsky on 05/19  at  01:56 AM

<div id="commentNumber147" class="commentEntry">
<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?

    <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.

    <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 ?!).

Anyway I got this amazing 24px (or 25px) smaller width for my select.

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

michaelR on 05/31  at  03:00 AM

<div id="commentNumber150" class="commentEntry">
<p>Hi guys, can’t make it work with the 1.8.1 jquery ui version :S

I made what @Andreas said, but no results....

you can see what I did here http://widgets.widgadget.com/test/selectmenu.html

Please help! :D

screenshot: http://img31.imageshack.us/img31/4153/selectmenu.png

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

Mauro on 06/03  at  03:49 AM

<div id="commentNumber151" class="commentEntry">
<p>@Mauro: The link your’ve provided works for me (Firefox) without problems. Have you tried another browser? Cache problem?


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

Andreas on 06/03  at  04:30 AM

<div id="commentNumber152" class="commentEntry">
<p>@Andreas yes sorry about that try again now ;) <a href="http://widgets.widgadget.com/test/selectmenu.html" rel="nofollow">http://widgets.widgadget.com/test/selectmenu.html</a>

View-souce and you will see the ui.selectmenu.js modified as you said.

I am using from google cdn jquery ui 1.8.1, jquery ui base themes 1.8.1 and jquery min 1.4.2.

I have tried it with the last chrome, ff3.5.9 and IE7-IE8


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

Mauro on 06/03  at  04:42 AM

<div id="commentNumber153" class="commentEntry">
<p>@Mauro: Try to add the ui.selecmenu.css ;-)

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

Andreas on 06/03  at  05:39 AM

<div id="commentNumber154" class="commentEntry">
<p>@Andreas Ooops! Heheh, Sorry about that :S It worked great, thanks a lot!

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

Mauro on 06/03  at  05:45 AM

<div id="commentNumber155" class="commentEntry">
<p>It’s very good.

I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.

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

Alex on 06/03  at  11:01 PM

<div id="commentNumber156" class="commentEntry">
<p>My solution of disable status:

$(’select#model’).selectmenu(’option’, ‘disabled’, true);

When ajax callback function return true:
$(’select#model’).selectmenu(’option’, ‘disabled’, false);

Works fine with Jquery UI 1.7.2 and Jquery 1.3.2

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

Lecktor on 06/06  at  07:59 AM

<div id="commentNumber157" class="commentEntry">
<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 .

. Thanks in advance

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

globsoft on 06/10  at  01:13 PM

<div id="commentNumber158" class="commentEntry">
<p>Very nice plugin, thx. I have problem/bug tho.

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.
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.

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

etsgrafica on 06/21  at  07:27 AM

<div id="commentNumber159" class="commentEntry">
<p>Great plugin..

Can it be extended with sub-menu’s?

item 1
item 2 - item 1
- item 2
item 3

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

CB on 06/21  at  03:40 PM

<div id="commentNumber160" class="commentEntry fg">
<p>@CB: yep, just use optgroups in your markup.

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

Scott (Filament) on 06/21  at  03:48 PM

<div id="commentNumber161" class="commentEntry">
<p>What’s the proper method to update the rendered select to match the SELECT input value?

For instance:

on page load we render the select: $(’theSelect’).selectmenu();

Later, via jQuery, we updated the selected value of the underlying input:


However, we then need to tell the selectmenu that was rendered based on that select input to re-render with the updated value.

, we’re updating a SELECT input via jQuery. Once that’s updated, we also want the rendered SELECT to reflect the new value in the underying input field.

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

da on 06/22  at  05:48 PM

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



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

Steve Esson on 06/23  at  02:35 AM

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

I had the same issue as you. Making it as autosubmit select control is much easier though plus browser compatible.

Replace href="#" with href=“‘+ selectOptionData.value +’” (line 133) on the write li loop

Comment out the following (line #147):
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 class="posted"><a href="#commentNumber163">Comment</a> by

vadims on 06/25  at  03:26 AM

<div id="commentNumber164" class="commentEntry">
<p>How do I add the selectmenu to modal dialog? does not work, appears below the modal window.

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

Mauricio G. on 06/26  at  12:01 PM

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

I am having hard time getting this plugin to work with jQuery UI 1.8.2

For some reason i end up with

Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor ‘enhanced’
return new jQuery.fn.init( selector, context );
} has no method ‘widget’

But i do have jQueryUI Core, and its fully functioning, as i already use Button and Slider widgets....

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

solefald on 06/26  at  01:12 PM

<div id="commentNumber166" class="commentEntry">
<p>oops, have to add, i am using latest version of the plugin from SVN


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

solefald on 06/26  at  01:19 PM

<div id="commentNumber167" class="commentEntry">
<p>@Arnell D : A BIG thank you, it works perfectly !!

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

Lyne Boucher on 06/27  at  02:51 PM

<div id="commentNumber168" class="commentEntry">
<p>How make dependent selects????? help me please!!!!!!!!!!!!!! i want to make two cascade select!!!!!!!! THANKS

    <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?

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

Ryan W on 06/29  at  03:45 AM

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

    <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

.css("display", “block")

That did the trick.

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

Liv on 07/02  at  04:17 AM

<div id="commentNumber172" class="commentEntry">
<p>@Liv Nice job! Thanks.

Can someone now fix this and commit so we can update? @Scott ?

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

automobi.li on 07/02  at  04:27 AM

<div id="commentNumber173" class="commentEntry">
<p>Hi there, great plugin. I’m trying to do some samples using them with asp.net

Just one question : to use the plugin without problems (i guess due to no checks in case of a empty select) i’ve done two modifications :

- in the :open method i’ve added a check

if (this._selectedIndex() != -1)
.addClass(self.widgetBaseClass + ‘-open’)
.attr(’aria-hidden’, false)
.find(’li:not(.’+ self.widgetBaseClass +’-group):eq(’+ this._selectedIndex() +’) a’)[0].focus();

- in the init function (at row 291 circa)

if (this._selectedIndex() == -1)
this.newelement.prepend(’<span class=”’ + self.widgetBaseClass + ‘-status"></span>’);
this.newelement.prepend(’<span class=”’ + self.widgetBaseClass + ‘-status">’ + selectOptionData[this._selectedIndex()].text + ‘</span>’);

with the two above modifications it works fine .... don’t know if it’s the way it should done but it works for me.

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

Mattia on 07/02  at  05:13 AM

<div id="commentNumber174" class="commentEntry">
<p>Anyone know if this will work with the JQuery Validation plugin?

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

Jd on 07/03  at  04:30 PM

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

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

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

Mattia on 07/04  at  02:25 AM

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

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:

addErrorClass: function() { // UiUSA Custom method
removeErrorClass: function() { // UiUSA Custom method

2. Then use a combination of the jQuery validation invalid handler to apply invalid states to your plugin using the methods in 1.

function invalidHandler (e, validator) {

var errors = validator.numberOfInvalids();

if (errors) {
$("select.selectRequired").each( function() {
$select = $(this);
var val = $select.val();
if(val == “0” || val == “") { // determine if valid/invalid

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 class="posted"><a href="#commentNumber176">Comment</a> by

Steve Esson on 07/05  at  03:59 AM

<div id="commentNumber177" class="commentEntry">
<p>Thanks for this plugin !

Semicolons are missing on lines 111 and 484, it makes an “missing ; before statement” error with Dean Edwars’ JavaScriptPacker.

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

Samuel Sanchez on 07/05  at  03:59 AM

<div id="commentNumber178" class="commentEntry">
<p>Once again, you guys are doing a wonderful job, thanks a lot

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

Ethan on 07/07  at  03:20 AM

<div id="commentNumber179" class="commentEntry">
<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 class="posted"><a href="#commentNumber179">Comment</a> by

Jd on 07/08  at  04:54 PM

<div id="commentNumber180" class="commentEntry">
<p>Did the Filament Group folks create your own comment system? If not who’s are you using?

    <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?

    <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

    <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’:

for(var i in selectOptionData){
if(isNaN(parseFloat(i))) continue;

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.

    <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???? :((

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

Reda on 07/28  at  10:08 PM

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

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

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?

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

Shawn Marincas on 07/28  at  11:30 PM

<div id="commentNumber186" class="commentEntry">
<p>thank you for #3, it worked well and solved my problem..

regarding #1, i found a little update of your script on the internet, it’s because your script is not compatible with the UI 1.8… :( http://stackoverflow.com/questions/2977870/jquery-selectmenu-closes-after-click

as for #2, it partially works, if the dropdown list is in the bottom of the page, it’ll still show a little scrollbar in the window: http://moroccan-arts.co.uk/index1.php
It’ll be much better if the popup could be intelligent like this plugin: http://www.prismstudio.co.uk/plugins/stylish-select/0.4/

I also have another and last problem :( i’m using a js script to locate the country but it doesnt seem to work with select-menu. do u know what i can do??

Thanks you so much once again

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

Reda on 07/30  at  03:09 PM

<div id="commentNumber187" class="commentEntry">
<p>Hi, great plugin. It looks really great.

I am having one problem with it though - when used in a jquery dialog ui component the options appear behind the dialog.

I saw someone else ask this but I didn’t see any work around for it. Is there one?

Otherwise though, really nice job.

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

Andrew on 07/30  at  08:45 PM

<div id="commentNumber188" class="commentEntry">
<p>There are issues with version 1.8.2. of jquery-ui - for example concerning the width of the selectmenues ...

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

Thorsten on 08/05  at  10:52 AM

<div id="commentNumber189" class="commentEntry">
<p>@Andrew - It’s gonna be a Z-index issue most likely, as far I can tell the generated option menu doesn’t actually get an explicit z-index set by the plug-in.

So it’s up to you to make sure your ui-selectmenu-menu class has a z-index higher than your dialog box, which jQuery UI sets to 1000 and increments by 1 for each subsequent dialog that is popped.

May I recommend setting it to 4200 ;)?

@Filament, since this is an issue that has come up multiple time, maybe you can add the z-index that will be set on the menu to the options that are being passed in?

That way it’s nice and easy for people to either class all their dialogs with a z-index or set z-indexes for any selectmenus that are generated dynamically in different layers of their web app.

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

Shawn M. on 08/05  at  11:47 AM

<div id="commentNumber190" class="commentEntry">
<p>I’ve fixed a few bugs and compatibility problems within my jQuery UI fork at GitHub to push further development of this plugin:


So far the following fixes are included:
- working with jQuery 1.4.x and jQuery UI 1.8.x
- problems with positioning
- problems with whitespaces in optgroup

Please download repo, open: demo/selectmenu/index.html

Feel free to post feature requests and bugs to the jqueryui wiki page of selectmenu or even better in the GitHub issue tracker.

Felix Nagel

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

Felix Nagel on 08/12  at  03:11 AM

<div id="commentNumber191" class="commentEntry">
<p>hi, im newbie in JQuery, i

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

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

herybarkan on 08/15  at  11:36 PM

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

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!

    <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.

    <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)?

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

Peter on 08/17  at  02:28 AM

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

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):

1) fix css properties in jquery-ui-selectmenu.css:
in .ui-selectmenu-menu change ‘visibility: hidden’ to ‘display: none’
in .ui-selectmenu-open change ‘visibility: visible’ to ‘display: inline-block’

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)

Hope this helps!

Mehdi Haresi

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

Mehdi Haresi on 08/21  at  10:22 AM

<div id="commentNumber196" class="commentEntry">
<p>first of all, I have to say it is a great job.

but there is a little problem here

if the optgroup label have blank space, no matter how many options grouped in this group, the plugin will seperate them as individule option

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

Ethan Zhagn on 08/22  at  11:43 PM

<div id="commentNumber197" class="commentEntry">
<p>@Ethan Zhagn

This is already foxed, please see my comment above:

This is seriously the wrong place to post fixes and bugs. These files are outdated and wont work with jQuers UI 1.8.x. Please see the jQuery UI Forum and Wiki or check out my fork of this widget:

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

Felix Nagel on 08/23  at  03:54 AM

<div id="commentNumber198" class="commentEntry">
<p>I want to use this plugin but would rather the button and dropmenu not have a fixed width, instead being autosized to the longest available select option. Is that possible, and how? Thx much! --cg

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

cg on 08/25  at  10:51 PM

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

Normally this is controlled by the width of the select itself (before transforming), so you need to control this width. In most browsers the width should be auto if not set manually.

Hope that helps,

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

Felix Nagel on 08/26  at  02:24 AM

<div id="commentNumber200" class="commentEntry">
<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

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

herybarkan on 08/26  at  03:10 AM

<div id="commentNumber201" class="commentEntry">
<p>To solve problem with spaces in labels I replaced 161 line of plugin with:

var optGroupName = self.widgetBaseClass + ‘-group-’ + selectOptionData.parentOptGroup.replace(/[^a-zA-Z_-]/g,’’);

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

Ivan Kuznetsov on 08/28  at  12:01 PM

<div id="commentNumber202" class="commentEntry">
<p>@Felix Nagel or Others people…

any one can solve my problem…

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

herybarkan on 08/29  at  03:00 AM

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

This is already fixed, but thanks.

You need to init the widget for each added select field.
ps: Why dont you use the jQuery built-in AJAX functions?

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

Felix Nagel on 08/29  at  04:03 PM

<div id="commentNumber204" class="commentEntry">
<p>how to write script to initialize the widget......

yes, sorry. because I am very new to JQuery and JS
Can you give an example jQuery UI SelectMenu script using the built-in AJAX functions.
thank you for your attention and solution

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

herybarkan on 08/29  at  10:56 PM

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

Try something like this:

select: function(event, options) {
data: “get_data=” + options.value,
type: “GET”,
// you need a serversite script which checks the username
url: “http://app.alkontraining.com/combo/php/get_data.php”,
success: function(value) {
// add the returned HTML (the new select)

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

Felix Nagel on 08/30  at  04:38 PM

<div id="commentNumber206" class="commentEntry">
<p>How can I get the value of a selected element?

..and is there some manual for using events?

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

Philip on 09/01  at  06:03 AM

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

Please take a look the comment above yours.

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

Felix Nagel on 09/01  at  07:04 AM

<div id="commentNumber208" class="commentEntry">
<p>@Felix Nagel


I saw that comment actually, and options.value return only index of selected option element (0,1,2..), but I need a real values, something like ("slow”,"fast”,"faster")

Also I thought there is some special way to get selected option value LoL :), but simple .val() solves the problem. I apologize guys :) :)

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

Philipp on 09/01  at  07:29 AM

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

In PHP I do this :

$tabMois = array(1 => “Janvier”,
2 => “Février”,
3 => “Mars”,
4 => “Avril”,
5 => “Mai”,
6 => “Juin”,
7 => “Juillet”,
8 => “Août”,
9 => “Septembre”,
10 => “Octobre”,
11 => “Novembre”,
12 => “Décembre");
<select id="moisCTED" name="mois" onchange="changeCTED_VAC(’frm_CTED_VAC’, ‘res_CTED_VAC’);">
foreach($tabMois as $key => $value) {
<option <?php if($key == $moisDefault) echo "selected='selected'"; ?> value="<?php echo $key; ?>"><?php echo $key . " - " . utf8_encode($value); ?></option>

And in [removed]
$(’#moisCTED’).selectmenu({ width: 150, style:’dropdown’ });

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

    <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)

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

dillion on 09/02  at  05:50 PM

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

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

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

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

Felix Nagel on 09/02  at  06:00 PM

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

Thanks but it not work :

I do this and it is the same problem :
<select onchange="loadFormulaireRestes();" name="selectEtab" id="selectEtab">
<option value=’AAAA’>AAAA</option>
<option value=’BBBB’>BBBB</option>
<option value=’CCCC’>CCCC</option>
<option value=’DDDD’>DDDD</option>
<option value=’EEEE’>EEEE</option>
<option value=’FFFF’>FFFF</option>

I don’t understand why it do 2 option undefined....


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

Paul on 09/07  at  09:45 AM

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

Please provide a full example within a zip file.

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

Felix Nagel on 09/07  at  10:56 AM

<div id="commentNumber214" class="commentEntry">
<p>@ Felix Nagel

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
please can you fix my script
Please send to my email
thanks for your help

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

herybarkan on 09/07  at  10:41 PM

<div id="commentNumber215" class="commentEntry">
<p>Hello, I am using the “dropdown Style” in a test application web, but I have a problem.

My application is based on Wicket Framework and it uses Ajax for some things (I can´t modify anything ajax code), so the problem appear when the web is refresh through Ajax, for example…

When the web appears for first time, the “dropdown Style” works fine, but when I do click in a button which refresh the web (through Ajax), the custom select disappears and appear the classic select.

Are there any solution for this situation?

Thanks a lot.

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

Facundo on 09/09  at  09:19 PM

<div id="commentNumber216" class="commentEntry">
<p>Nice job Felix Nagel,  Your “forked” version seems to work great.&nbsp; Any talk about making this plugin part of the jQuery UI core?

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

Michael Reed on 09/10  at  01:51 AM

<div id="commentNumber217" class="commentEntry">
<p>@ Facundo

you have the same problem with me .......

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

herybarkan on 09/10  at  03:18 AM

<div id="commentNumber218" class="commentEntry">
<p>@Michael Reed

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!

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

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.

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

Felix Nagel on 09/10  at  06:44 AM

<div id="commentNumber219" class="commentEntry">
<p>is it please possible to unsubscribe to this thread? thanks

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

Reda on 09/10  at  07:34 AM

<div id="commentNumber220" class="commentEntry">
<p>u do very well, my web site is a <a href="http://www.ywjia.com" rel="nofollow">laptop battery</a> site, Recently i want to use jquery in my site,but it run slowly, i don’t know why

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

huangji on 09/10  at  07:36 AM

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

Just check the email you receive with every comment.

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

Felix Nagel on 09/10  at  07:50 AM

<div id="commentNumber222" class="commentEntry">
<p>Still trying to get the disable/enable functionality to work.. I’ve tried the suggestions listed above,.. but now dice.

I’m using:
jQuery UI 1.8.4
jQuery 1.4.2
most recent selectmenu.js file

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 });

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 !!!!

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

Revive on 09/12  at  12:30 PM

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

I’m sorry, but I still dont get your point. Your example is working so far. All you need to do is to process your incoming values. It seems youre missing basic PHP and jQuery knowledge, so I completed the example for you.
See http://www.felixnagel.com/fileadmin/selectmenu_example_1.zip

Please provide a complete example as at least:
test = $(’select#speedA’).selectmenu();
works for me perfectly.

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

Felix Nagel on 09/12  at  04:53 PM

<div id="commentNumber224" class="commentEntry">
<p>@Felix Nagel,

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.

if( $(this).val() === 0 ){
$(’#messaging_recipient_list’).attr(’disabled’, ‘disabled’).selectmenu(’disable’);
else if( $(this).val() !== 0 ){
else {
$(’#black_header’).text(’Messaging System’);

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

Revive on 09/12  at  07:56 PM

<div id="commentNumber225" class="commentEntry">
<p>Here are some other variations I’ve tried.. without luck:

$(’#messaging_recipient_list’).selectmenu({style:’dropdown’, disabled: true});
// OR
// OR
$(’#messaging_recipient_list’).attr(’disabled’, true).selectmenu(’disable’);
// OR

I even tried applying selectmenu() to the second select list and then destroying it and applying it again, on change of the first select element.. :-(

and MANY more .. lol.. would love to get the disabled functionality figured out.. I’m sure it works fine.. just a matter of figuring out where I am going wrong with my use of it.. thanks again!

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

Revive on 09/12  at  09:00 PM

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

Pleas see: http://github.com/fnagel/jquery-ui/issues/issue/12

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

Felix Nagel on 09/13  at  06:41 PM

<div id="commentNumber227" class="commentEntry">
<p>Sounds like a possible bug to me too ;) Thanks for describing it clearly on github!

    <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.

Am I doing something wrong?

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

Marvin Herbold on 09/20  at  10:48 PM

<div id="commentNumber229" class="commentEntry">
<p>Any word on the disable function(s) ??

Please check my previous comments:

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 ;) )

    <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.

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?

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

Felix Nagel on 09/24  at  04:43 AM

<div id="commentNumber231" class="commentEntry">
<p>If you see my post above, I’ve tried using the .selectmenu(’disable’) function as well as applying it directly to the HTML element.. neither work. Here is the exact code I am using:

$(’#messaging_recipient_list’).selectmenu({style: ‘dropdown’}).selectmenu(’disable’);

<select class="select fluid” name="recipient" id="messaging_recipient_list">
<option value="” selected="selected">Select Recipient </option>
<option value="">Username 1</option>
<option value="">Username 2</option>
<option value="">Username 3</option>
<option value="">Username 4</option>
<option value="">Username 5</option>
<option value="">Username 6</option>
<option value="">Username 7</option>
<option value="">Username 8</option>
<option value="">Username 9</option>
<option value="">Username 10</option>

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..

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

Revive on 09/24  at  05:24 AM

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

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.

You need to find the problem within the jQuery UI widget.js file.

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

Felix Nagel on 09/24  at  05:35 AM

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

Thanks for the reply.. ok, but what is happening when I call the disabled attribute on the HTML element itself and it still is not disabled in this plugin??

Here is the exact code - with MOST of the ways I have tried to get this to work, uncommented out:

$(’#messaging_recipient_list’).selectmenu({style: ‘dropdown’}).selectmenu(’disable’);
// doesn’t work
$(’#messaging_recipient_list’).attr(’disabled’, ‘disabled’);
// doesn’t work

$(’#message_type’).change(function () {
if ($(this).val() != 3) {
$(’#messaging_recipient_list’).selectmenu(’destroy’).selectmenu({style: ‘dropdown’}).selectmenu(’disable’);
// doesn’t work
// doesn’t work
$(’#messaging_recipient_list’).selectmenu(’option’,’disabled’, true);
// doesn’t work
$(’#messaging_recipient_list’).attr(’disabled’, ‘disabled’);
// doesn’t work
else {
$(’#messaging_recipient_list’).selectmenu(’destroy’).selectmenu({style: ‘dropdown’}).selectmenu(’enable’);
// doesn’t work
// doesn’t work
$(’#messaging_recipient_list’).selectmenu(’option’,’enabled’, true);
// doesn’t work
$(’#messaging_recipient_list’).attr(’disabled’, ‘’);
// doesn’t work
// doesn’t work

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’);


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

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

Revive on 09/24  at  05:41 AM

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

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 class="posted"><a href="#commentNumber234">Comment</a> by

Felix Nagel on 09/24  at  05:57 AM

<div id="commentNumber235" class="commentEntry">
<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..

    <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.

    <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.

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 class="posted"><a href="#commentNumber237">Comment</a> by

Felix Nagel on 09/26  at  11:28 AM

<div id="commentNumber238" class="commentEntry">
<p>I’ll do better - here is a live demonstration of the disable attribute in the select tag not working when the javascript is applied to it:


The select inputs are in the 2nd section (click on the “Attributes” header).  There are 2 select inputs and they are both supposed to be disabled.

It doesn’t work in any of the major browsers I have tried (IE, Firefox, Safari, Chrome).

If you turn off the javascript, both of the select inputs are disabled as intended.

What am I missing?

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

Marvin Herbold on 09/27  at  12:10 PM

<div id="commentNumber239" class="commentEntry">
<p>Were you able to reproduce the issue with the web link I provided?

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

Marvin Herbold on 09/28  at  11:57 PM

<div id="commentNumber240" class="commentEntry">
<p>@Marvin Herbold

I can reproduce the problem, but only within your demo. Please see latest commit as I added an demo for you: http://github.com/fnagel/jquery-ui

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

Felix Nagel on 09/29  at  06:42 PM

<div id="commentNumber241" class="commentEntry">
<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 class="posted"><a href="#commentNumber241">Comment</a> by

Marvin Herbold on 09/29  at  07:13 PM

<div id="commentNumber242" class="commentEntry">
<p>Is there a solution for the space at the bottom of the page?

I found that on http://wiki.jqueryui.com/Selectmenu

But it seems to be don’t work…

//To make the select menu go up instead of down when at the bottom of the page //you can add replace the _refreshPosition function with this below:

_refreshPosition: function(){
//set left value
this.list.css(’left’, this.newelement.offset().left);

//set top value
var menuTop = this.newelement.offset().top;
var scrolledAmt = this.list[0].scrollTop;
scrolledAmt -= $(this).outerHeight();

else {
if(menuTop + this.list.height() > $(window).height()){
menuTop = menuTop - this.list.height();
menuTop += this.newelement.height();
this.list.css(’top’, menuTop);

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

Fabsch on 10/01  at  03:28 AM

<div id="commentNumber243" class="commentEntry">
<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

var selectClone = $("#selectClone").clone(true);
$("#container div:last").find(’select’).selectmenu({width:100});


<button id="button">Add</button>

<div id="selectClone">
<select class="selectmenu"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>

<select id="selectSetting"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>
<div id="container"></div>


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

Michael Reed on 10/02  at  02:56 PM

<div id="commentNumber244" class="commentEntry">
<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


    <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…

This is already fixed. Please use my updated forked version at http://github.com/fnagel/jquery-ui/tree/selectmenu

@Michael Reed
I do not get what your code is about. Seems pretty complicated. Did you take a look at the ajax demo? http://github.com/fnagel/jquery-ui/blob/selectmenu/demos/selectmenu/ajax.html

Above 1.8? There is no 1.8 tag or something. My GitHub repo is just a fork with a branch. Please make sure youre using my selectmenu branch: http://github.com/fnagel/jquery-ui/tree/selectmenu

Please consider a donation as I support you my spare time:

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

Felix Nagel on 10/04  at  03:39 AM

<div id="commentNumber246" class="commentEntry">
<p>Love the plugin !&nbsp;

I suggest that when tracking with a mousedown+drag to hide/release the menu on mouseup

Currently when used with a mousedown+drag you have to click to hide after mouseup

thanks again

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

al; on 10/04  at  07:38 AM

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

Thanks for the link to the ajax demo.  Is it possible to view this code in action without downloading it as well as the supporting css/etc to my server?

What is my code is about?  I have a table where one of the columns contains a selectmenu.  The user is able to add a row.  To add a row, I clone a hidden row and append it to the table.


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

Michael Reed on 10/04  at  08:15 AM

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

Disabled attribute tracking on options in the markup is not working for me

I just updated from fnagle’s github

My markup:

<div id="bp-adds">
<select id="blockTypeSelect">
<option disabled="disabled" value="0">Add Block</option>
<optgroup label="InformationBlocks">
<option value="Text">Text</option>
<option disabled="disabled" value="Image">Image</option>
<option disabled="disabled" value="Video">Video [Link]</option>
<option disabled="disabled" value="Chart">Chart</option>
<optgroup label="InputBlocks">
<option value="Input">Textual</option>
<option disabled="disabled" value="Radio">Radio [Group]</option>
<option value="Checkbox">Checkbox</option>
<option disabled="disabled" value="Slider">Slider</option>

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

al; on 10/04  at  09:02 AM

<div id="commentNumber249" class="commentEntry">
<p>@Micheal Reed

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.

Sorry, I dont get your point with mousedown/drag.
Disable a single option within a select is currently not possible. You’re invited to help me!
I opened a issue as your idea is a useful feature: http://github.com/fnagel/jquery-ui/issues/issue/18

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

Felix Nagel on 10/04  at  06:01 PM

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

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


    <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…

to add blur()

options: {
doBlur: false, // set to false to preserve existing behavior

if(this.options.doBlur){this.newelement[0].blur();} // uses option value

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

al; on 10/04  at  07:54 PM

<div id="commentNumber252" class="commentEntry">
<p>as regards disabled options:

disabled: $(this).attr(’disabled’), // capture option disabled state


for (var i = 0; i < selectOptionData.length; i++) {
var disabledClass = (selectOptionData.disabled)? ‘ui-state-disabled’: ‘’; // apply disabled state class
var thisLi = $(’<li role="presentation" class="’+disabledClass+‘“>‘+ selectOptionData.text +’</li>’)


if (! selectOptionData[$(this).data(’index’)].disabled) { // ignore mouseup’s on disabled items
var changed = $(this).data(’index’) != self._selectedIndex();
if(changed){ self.change(event); }
return false;


.bind(’mouseover focus’, function(){
if (! ($(this).data(’disabled’))) { // only focus on enabled options
self._focusedOptionLi().removeClass(self.widgetBaseClass+’-item-focus ui-state-hover’);
$(this).removeClass(’ui-state-active’).addClass(self.widgetBaseClass + ‘-item-focus ui-state-hover’);

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

al; on 10/04  at  09:19 PM

<div id="commentNumber253" class="commentEntry">
<p>as regards menu positioning :

// set values
top: menuTop,
left: this.newelement.offset().left - (o.menuWidth - o.width + o.handleWidth)

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

al; on 10/05  at  06:29 AM

<div id="commentNumber254" class="commentEntry">
<p>as regards my previous defocus() suggestion

if(this.options.doBlur){this.newelement[0].blur(); } // defocus by option

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

    <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.

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

phazei on 10/06  at  07:02 PM

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

Use the GitHub issues at: http://github.com/fnagel/jquery-ui/issues

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.

Thanks for participating. Keyboard issue bug can be found here: http://github.com/fnagel/jquery-ui/issues/#issue/6

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

Felix Nagel on 10/07  at  06:12 PM

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

will do!


I disagree, space bar _should_ open the menu if it’s focused


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

al; on 10/07  at  06:20 PM

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

Nice! Thanks a lot for your help. Any fixes that are working and could be tested will be implemented as fast as possible!

Please discuss keyboard control issues at GitHub. Thanks!

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

Felix Nagel on 10/07  at  06:23 PM

<div id="commentNumber259" class="commentEntry">
<p>to disable or enable it change the following lines:

//transfer disabled state
if(this.element.attr(’disabled’) == true){this.disable();}


//transfer disabled state
if(this.element.attr(’disabled’) == true){
$(’#’+this.ids[0]).addClass(’ui-selectmenu-disabled ui-state-disabled’);
$(’#’+this.ids[0]).attr(’aria-disabled’, true);

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

Bryan portillo on 10/07  at  06:39 PM

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

Thanks for this great menu

but I have question.

I’ve noticed that when you click on the menu to view options, the width of the options list is less than the menu width so you can see the arrow

I want when user click on the menu that the width of the option list is equal to the menu width (the width of select when the user not clicking on it)

I hope some one can help me

Thanks very much for this great menu

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

szamdev on 10/08  at  04:48 AM

<div id="commentNumber261" class="commentEntry">
<p>how do i remove all / add to the dropdown.

the following code doesn’t work.
jQuery(’select#ListIdFrom’).replaceWith(’<select><option value="test">something</Option></select>’)

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

lmdik on 10/11  at  08:47 AM

<div id="commentNumber262" class="commentEntry">
<p>finally this one works.

$.fn.populateDropDown = function(jsonData) {
var select = this;
var options = select.attr(’options’);
$(’option’, this).remove();

$.each(jsonData, function(val, text) {
options[options.length] = new Option(text, val) ;




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

lmdik on 10/11  at  09:06 AM

<div id="commentNumber263" class="commentEntry">
<p>Please ignore the last post, this code works.

$.fn.populateDropDown = function(jsonData) {
var select = this;
var options = select.attr(’options’);
$(’option’, this).remove(); .
$.each(jsonData, function(val, text) {
options[options.length] = new Option(text, val) ;

select.selectmenu(’destroy’); .


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

lmdik on 10/11  at  09:36 AM

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

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

chinateam on 10/12  at  08:53 AM

<div id="commentNumber265" class="commentEntry">
<p>Hi - found a small bug…

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.

    <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.

Are you using the latest version from GitHub? See http://github.com/fnagel/jquery-ui/tree/selectmenu

@Marvin Herbold
AGAIN: do not post bugs here, use GitHub issues instead: http://github.com/fnagel/jquery-ui/issues
This is not a problem as nobody uses this on a empy select.

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

Felix Nagel on 10/13  at  09:00 AM

<div id="commentNumber267" class="commentEntry">
<p>Hello, I am having problems with using the selectmenu inside a jquery dialog.

I am using jquery 1.4 and jqueryUI 1.8.5.

I have applied some of the fixes that I have read here but I can’t get through. Which is the version known to be working with jQuery 1.4 and ui 1.8?


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

Vincenzo on 10/17  at  09:58 PM

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

See here for a updated version: http://github.com/fnagel/jquery-ui/tree/selectmenu

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

Felix Nagel on 10/18  at  04:06 AM

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

I’ve forked and committed the changes for disabled options within the select

Also a minor adjustment to align the ui.selectmenu with the handle rather than the original select

Sorry to take so long,


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

al; on 10/18  at  07:28 AM

<div id="commentNumber270" class="commentEntry">
<p>@Felix Nagel

Thanks for your response.

I have been able to reproduce the issue I am encountering also with code downloaded from the address provided.

Just to be sure: I have downloaded the javascript file and the css file respectively from:
js: http://github.com/fnagel/jquery-ui/blob/selectmenu/ui/jquery.ui.selectmenu.js
css: http://github.com/fnagel/jquery-ui/blob/selectmenu/themes/base/jquery.ui.selectmenu.css

You can find my sample here: http://bit.ly/auTqCs

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

Vincenzo on 10/18  at  08:33 AM

<div id="commentNumber271" class="commentEntry">
<p>@Felix Nagel

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

    <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.

    <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

If you notice issues, Felix has asked that you post them in the issue tracker of his project here: http://github.com/fnagel/jquery-ui/issues

Felix, thanks so much for all the hard work, and for answering the multitudes of questions about this plugin.

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

Scott (Filament) on 10/18  at  09:41 AM

<div id="commentNumber274" class="commentEntry">
<p>Really, really nice idea… GREAT JOB!!!! u are the best… i dont like use FLASH and jQuery was helping me to not use on my jobs… with this idea i will finishe other work… tanks guy…

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

Raphael Filipe Schubert on 10/20  at  04:52 PM

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

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?

    <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

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

russ on 10/23  at  12:10 AM

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

can somebody please help on how to use this plugin? I am reading that many users are using this plugin and they say “great”, “awesome” and many more pretty words on it.

I was not able to get it working and I think it’s because I am not sure to use the same codebase as others does.

I have included in my page jquery 1.4.3 and jquery UI 1.8.5 directly from the google CDN.

Following Felix Nagel advice on comment #268 I have then included the selectmenu.js from http://github.com/fnagel/jquery-ui/blob/selectmenu/ui/jquery.ui.selectmenu.js and the corresponding css file available at http://github.com/fnagel/jquery-ui/blob/selectmenu/themes/base/jquery.ui.selectmenu.css

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!

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

Pierre on 10/25  at  10:21 AM

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

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

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.

Did you tried the demo file? You should download the latest built: http://github.com/fnagel/jquery-ui/zipball/selectmenu
and go to demos\selectmenu\index.html

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

Felix Nagel on 10/25  at  04:15 PM

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

problem to display selectmenu in the modal window,
dialog window stack on the selectmenu options, so i can’t access them, pls help me!
my code is

modal window-------

$(function() {
autoOpen: false,
height: 340,
width: 420,
modal: true,
buttons: {
‘Create New User’: function() { ---- },
Cancel: function() { $(this).dialog(’close’); }
close: function() { allFields.val(’’).removeClass(’ui-state-error’); }

.click(function() {
$(’select#designation’).selectmenu({style:’dropdown’,menuWidth: 247,maxHeight: 250});

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

dyapa srikanth on 11/08  at  02:32 AM

<div id="commentNumber280" class="commentEntry">
<p>that is just css problem

see this link
go to themes folder
you can find the solution

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

dyapa srikanth on 11/08  at  04:32 AM

<div id="commentNumber281" class="commentEntry">
<p>Здравствуйте! А будет ли работать с версией jquery 1.2.3min, а то специально для этого не хочется подключать ещё один. Сайт efutbolka.ru

Спасибо, хороший скрипт.

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

прикольные футболки on 11/08  at  04:29 PM

<div id="commentNumber282" class="commentEntry">
<p>Thanks! Very nice script.

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

космос on 11/08  at  04:30 PM

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

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

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

Felix Nagel on 11/09  at  06:27 PM

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

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!

    <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.

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

Vincenzo on 11/15  at  08:40 AM

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

See https://github.com/fnagel/jquery-ui/wiki/Selectmenu
Search for value method.
Removing the whole widget could be done by using the destroy method as usual when using jQuery UI widgets. Please go to jqueryui.com and look how to use widgets.

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

Felix Nagel on 11/15  at  02:07 PM

<div id="commentNumber287" class="commentEntry">
<p>@Felix Nagel

Thanks for the hint about the value method. I’ve managed to work!

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

Vincenzo on 11/15  at  09:06 PM

<div id="commentNumber288" class="commentEntry">
<p>hanks for the hint about the value method. I’ve managed to work!&nbsp; sağol

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

porno on 11/20  at  08:10 PM

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

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?

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

Humberto on 11/21  at  06:49 AM

<div id="commentNumber290" class="commentEntry">
<p>I find a solution: <a href="https://github.com/fnagel/jquery-ui/issues#issue/23/comment/542070" rel="nofollow">https://github.com/fnagel/jquery-ui/issues#issue/23/comment/542070</a>

Thanks gyus, great job!

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

Humberto on 11/21  at  07:02 AM

<div id="commentNumber291" class="commentEntry">
<p>at the line of 235, i modify like this

var selectWidth = this.element.width()+16;
the 16 is the pic’s width

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

bluetouch.chen on 11/28  at  11:21 PM

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

i apologize for my terrible english, but i’ll try to make myself as clear as possible.
I tried to load content via Ajax, so as said before:

onSelect MENU1 {
-destroy MENU2
-update select MENU2 html
-recreate MENU2 }

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.

here is the url if you want: http://www.em-chiusuretecniche.it/preventivo.asp
My goal is to change the content of the “modello” selector based on “Tipologia di installazione”

MANY THANKS to everyone willing to help me!

I’m running jquery 1.4.2 + jquery UI 1.8.6-min

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

Matteo on 12/03  at  05:48 AM

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

I think that this answer can help you. It shows the correct way to add options at runtime to a select element styled with the selectmenu plugin. Please look at the beforeSend ajax option


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

Vincenzo on 12/03  at  08:48 AM

<div id="commentNumber294" class="commentEntry">
<p>I have a problem.

I generate OPTION in a php function and return it on page in a jquery dialog.
i have problem with values - they are under the jquery dialog.
can someone help me?

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

luki on 12/06  at  11:03 AM

<div id="commentNumber295" class="commentEntry">
<p>Hey luki,

please use the latest commit of my above linked branch. The jQuery UI dialog widget issue has already been fixed. Take a look here: https://github.com/fnagel/jquery-ui/issues#issue/23

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

Felix Nagel on 12/06  at  11:11 AM

<div id="commentNumber296" class="commentEntry">
<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 class="posted"><a href="#commentNumber296">Comment</a> by

Scott Morrison on 12/16  at  12:16 PM

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

Please open a ticket here https://github.com/fnagel/jquery-ui/issues

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

Felix Nagel on 01/14  at  05:36 AM

<div id="commentNumber298" class="commentEntry">
<p>how to add class on select menu validation

$("select#designation").addClass(’ui-selectmenu-item-focus ui-state-hover’);

this is not working, help me urgent.

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

dyapa srikanth on 01/22  at  05:32 AM

<div id="commentNumber299" class="commentEntry">
<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 class="posted"><a href="#commentNumber299">Comment</a> by

Curly Joe on 02/01  at  02:14 PM

<div id="commentNumber300" class="commentEntry">
<p>@Dyapa and

Please open a single issue at GitHub for every feature request, question or bug report: https://github.com/fnagel/jquery-ui/issues

Selectmenu widget keeps the classes of the original select. Does that help?

I’m not sure what your question is about. This widget is a select replacement and is pretty close to the original behavior. What do you men by subfolder?

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

Felix Nagel on 02/01  at  03:04 PM

<div id="commentNumber301" class="commentEntry">
<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!

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

Curly Joe on 02/01  at  03:27 PM

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

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 class="posted"><a href="#commentNumber302">Comment</a> by

Lou Carey on 02/07  at  09:19 PM

<div id="commentNumber303" class="commentEntry">
<p>Thanx..very nice tutorial

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

Rahul r calicut on 02/22  at  03:11 AM

<div id="commentNumber304" class="commentEntry">
<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?

Please let me know.


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

James Caruso on 03/09  at  10:05 AM

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

Did you tried the latest version from my GitHub branch?

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

Felix Nagel on 03/10  at  04:04 AM

<div id="commentNumber306" class="commentEntry">
<p>@Felix Nagel - yes, I did. It was version 1.4.4, right? I used the code that was in the select-menu default demo page. I’ll post the errors I received here shortly.


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

James Caruso on 03/10  at  07:21 AM

<div id="commentNumber307" class="commentEntry">
<p>Current commits should use jQuery 1.4.4, thats right. Please do NOT post errors here, please use GitHub’s issues bug tracking: <a href="https://github.com/fnagel/jquery-ui/issues" rel="nofollow">https://github.com/fnagel/jquery-ui/issues</a>

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

Felix Nagel on 03/10  at  07:54 AM

<div id="commentNumber308" class="commentEntry">
<p>Okay - thanks for the heads up. I’ll post to there. Hopefully (and most likely) it’s something I’m doing. Thanks again for keeping in touch!

- JC

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

James Caruso on 03/10  at  08:00 AM

<div id="commentNumber309" class="commentEntry">
<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?

    <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 class="posted"><a href="#commentNumber310">Comment</a> by

Mikael on 03/15  at  10:04 AM

<div id="commentNumber311" class="commentEntry">
<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.

    <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 class="posted"><a href="#commentNumber312">Comment</a> by

Felix Nagel on 03/15  at  10:22 AM

<div id="commentNumber313" class="commentEntry">
<p>Does jQuery.ui.selectmenu  support jQuery 1.5.1  in IE9

I found a problem use it in jQuery 1.5.1 in IE9
JS Error
“SCRIPT438: Object doesn’t support property or method ‘replace’
jquery.min.js, line 16 character 49603”

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

vaik on 03/20  at  09:38 PM

<div id="commentNumber314" class="commentEntry">
<p>Does jQuery.ui.selectmenu support jQuery 1.5.1 in IE9

I found a problem use it in jQuery 1.5.1 in IE9
JS Error
“SCRIPT438: Object doesn’t support property or method ‘replace’
jquery.min.js, line 16 character 49603”

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

vaik on 03/20  at  09:39 PM

<div id="commentNumber315" class="commentEntry">
<p>JS Error jQuery 1.5.1 in IE9

“SCRIPT438: Object doesn’t support property or method ‘replace’
jquery.min.js, line 16 character 49603” .

selectmenu.js line 156 add “.selector”
Then it is ok in IE9 and all browser
if ($(this).is(self._selectedOptionLi().selector)) { $(this).addClass(activeClass); }

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

vaik on 03/21  at  02:52 AM

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

Please open a issue at GitHUb, no bugtracking here. https://github.com/fnagel/jquery-ui/issues

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

Felix Nagel on 03/21  at  03:32 AM

<div id="commentNumber317" class="commentEntry">
<p>This kills the select function for iphone and ipad. you’ll have to script it out if your using mobile safari

    <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 class="posted"><a href="#commentNumber318">Comment</a> by

Dietmar on 03/30  at  03:31 AM

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

I plan to deactivate selectmenu widget for mobile devices as there are multiple issues, please see and report here: https://github.com/fnagel/jquery-ui/issues#issue/73

Please open a issue on GitHub and post example code here: https://github.com/fnagel/jquery-ui/issues
Here is a tut how to post examples: https://github.com/fnagel/jquery-ui/issues#issue/61 or provide a zip

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

Felix Nagel on 03/30  at  06:05 AM

<div id="commentNumber320" class="commentEntry">
<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

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

Raj on 04/08  at  06:10 AM

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

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 :-)

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

Felix Nagel on 04/08  at  06:22 AM

<div id="commentNumber322" class="commentEntry">
<p>Hi. Selectmenu not worked in jquery tabs into other tabs except #a tab.

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

Arshak Khazaryan on 04/12  at  02:22 AM

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

Please read the Wiki before posting, thanks.

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

Felix Nagel on 04/12  at  02:34 AM

<div id="commentNumber324" class="commentEntry">
<p>Hey, thanks for this great plugin. However i can’t fix an issue.

I have two select menus, the second one is disabled (to do this i used this version https://github.com/fnagel/jquery-ui/commit/58b3f2ce34b3e72b44b9b4cbb88fdc3922b17c76). The fourth item in the first menu activates the second menu. To do this i use the .change function.

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 !

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

Abspirit on 04/18  at  01:17 PM

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

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 class="posted"><a href="#commentNumber325">Comment</a> by

Felix Nagel on 04/18  at  02:23 PM

<div id="commentNumber326" class="commentEntry">
<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 class="posted"><a href="#commentNumber326">Comment</a> by

Hans Mueller on 04/21  at  12:25 AM

<div id="commentNumber327" class="commentEntry">
<p>@Hans Mueller

No support here. Use GitHubs Issues system and post an example zip and give an exact step by step guide how to reproduce the problem.

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

Felix Nagel on 04/21  at  02:36 AM

<div id="commentNumber328" class="commentEntry">
<p>These are the nicest drop down menu features I’ve ever come across.&nbsp; Very slick and nice! Thanks for sharing and keep up the great work!

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

Peter on 05/09  at  10:58 AM

<div id="commentNumber329" class="commentEntry">
<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.

Very bad!

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

Wall Tearer on 05/12  at  07:44 AM

<div id="commentNumber330" class="commentEntry">
<p>Just click the download button with the pop-up. You’ve downloaded the jQuery 1.9 milstone 2 source.

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

Felix Nagel on 05/12  at  08:15 AM

<div id="commentNumber331" class="commentEntry">
<p>I’ve recently upgraded to jQuery 1.6.1 which was causing ui.selectmenu.js to crash upon destroying and recreating the select menu.

I had to modify lines starting at 308 to this:

if(parseFloat(jQuery.fn.jquery) >= 1.6){

I’m simply checking the version of jquery, if its higher than 1.6 I used the new prop method.

I’m sure there’s a better / more code correct way of doing it

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

Jon Howard on 05/13  at  06:30 PM

<div id="commentNumber332" class="commentEntry">
<p>Hi Folks,

anybody here who had an working solution for combining this Script with jscrollpane.(http://jscrollpane.kelvinluck.com/)?

Please let me know.

Regards Christian

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

Christian Thaele on 05/24  at  09:20 AM

<div id="commentNumber333" class="commentEntry">
<p>Hey Christian, please take a look here: <a href="https://github.com/fnagel/jquery-ui/issues#issue/58" rel="nofollow">https://github.com/fnagel/jquery-ui/issues#issue/58</a>

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

Felix Nagel on 05/24  at  09:22 AM

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

Thanks for you contribution, but this should not be necessary as 1.6.1 should handle attr and prop. Please see http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/ and https://github.com/fnagel/jquery-ui/issues/118

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

Felix Nagel on 05/24  at  09:32 AM

<div id="commentNumber335" class="commentEntry">
<p>Yes thanks, but it is not possible to combine the jscrollpane script. Try it and you will see.

Sure we can initialised both scripts but we have many problems.

Can you show me an working example with both Scripts?

Thank’s a lot.

R. Christian

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

Christian Thaele on 05/24  at  10:17 AM

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

No support here (only on GitHub) and I will not implement scripts for you :-)
Take a look here: https://github.com/fnagel/jquery-ui/issues/61

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

Felix Nagel on 05/24  at  10:23 AM

<div id="commentNumber337" class="commentEntry">
<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

I tried several options, seems nothing going my way

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

MANNSREE on 05/31  at  10:59 AM

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

Please use GutHub for asking questions: https://github.com/fnagel/jquery-ui/issues/
Im not quite sure what you are trying to do, but take a look at the Wiki, perhaps the methods could help you out: https://github.com/fnagel/jquery-ui/wiki/Selectmenu

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

Felix Nagel on 05/31  at  11:10 AM

<div id="commentNumber339" class="commentEntry">
<p>Hey Cristian,

could you looke here? http://huehnerauge.net

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

Micheal on 06/01  at  12:08 PM

<div id="commentNumber340" class="commentEntry">
<p>A ready option could be interesting, isn’t it ?

$.widget("ui.selectmenu", {
options: {
ready: $.noop
_init: function() {
// needed when selectmenu is placed at the very bottom / top of the page
window.setTimeout(function() {
}, 200);
Problem with the generated “ul” and the missing “value” attribute.

With this sample,
<select id="country" name="country">
<option value="fr">France</option>
and because the generated “ul li a” just contains the label of the associated option, I had to
ready: function() {
$(’#country-menu li a’).each(function() {
var value = $(this).text();
value = $(’#country option’).filter(function() {
return $(this).text() == value;
backgroundImage: ‘url(/images/flags/’ + value + ‘.png)’,
backgroundPosition: ‘5px center’,
backgroundRepeat: ‘no-repeat’,
paddingLeft: ‘25px’
to add country flags as a background image for each option.

Giving the “ul li a” a “data-value” containing the original option value could help a lot of people in such cases.

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

Gorcyn on 06/03  at  10:04 AM

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

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 class="posted"><a href="#commentNumber341">Comment</a> by

Felix Nagel on 06/03  at  10:21 AM

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

$(this).attr( ‘disabled’, ‘disabled’);


espero que les sirva.

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

javi venta on 06/13  at  11:10 AM

<div id="commentNumber343" class="commentEntry">
<p>Plugin is very good, but has a different behaviour of an html select.

In a native select you can type different chars and it will match all the options that start with that char sequence. Here instead it accepts only first letter-matching

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

andretti1977 on 06/14  at  05:26 AM

<div id="commentNumber344" class="commentEntry">
<p>@javi venta

There are some more methods available, take a look here: https://github.com/fnagel/jquery-ui/wiki/Selectmenu

The plugin supports multiple type ahead, at least it should. Did you download the latest version or stable (v1.1) version from GitHub?

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

Felix Nagel on 06/14  at  01:23 PM

<div id="commentNumber345" class="commentEntry">
<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.

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

andretti1977 on 06/15  at  10:28 AM

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

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 class="posted"><a href="#commentNumber346">Comment</a> by

Felix Nagel on 06/15  at  10:52 AM

<div id="commentNumber347" class="commentEntry">
<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?

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

andretti1977 on 06/15  at  11:24 AM

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

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.

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

Felix Nagel on 06/15  at  02:54 PM

<div id="commentNumber349" class="commentEntry">
<p>Hi, i noticed a bug under IE 7-8: select has a bad behaviour when embedded into a jqueryUI dialog. You can find an example here (compare FF and IE behaviours):


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 ;)

Thanks in advance

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

andretti1977 on 06/17  at  04:03 AM

<div id="commentNumber350" class="commentEntry">
<p>this link has correct css. Try it with IE7-8 and FF. Remeber: modal = true bad behaviour, modal = false, correct behaviour


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

andretti1977 on 06/17  at  04:33 AM

<div id="commentNumber351" class="commentEntry">
<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 :)

Here you can find the well IE7-8 and FF working version:


as you can check in “javascript window\”, i changed instruction (mehtod ‘open’):

this.list.addClass(self.widgetBaseClass + ‘-open’)
.attr(’aria-hidden’, false)
.find(’li:not(.’ + self.widgetBaseClass + ‘-group):eq(’ + this._selectedIndex() + ‘) a’)[0].focus();

to this one

this.list.addClass(self.widgetBaseClass + ‘-open’)
.attr(’aria-hidden’, false)
//.find(’li:not(.’ + self.widgetBaseClass + ‘-group):eq(’ + this._selectedIndex() + ‘) a’)[0].focus();

so the incriminated command is

.find(’li:not(.’ + self.widgetBaseClass + ‘-group):eq(’ + this._selectedIndex() + ‘) a’)[0].focus();

I don’t understand what is the meaning of that command, but commnting it allowed the process to correctly work also under IE. Can you explain me what are the drawbacks of mine solution?

Thanks in advance.

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

andretti1977 on 06/17  at  05:01 AM

<div id="commentNumber352" class="commentEntry">
<p>Again: No (!) support here, please open a issue on GutHub.

If you kill that focus no browser is able to use popup style correct, see: https://github.com/fnagel/jquery-ui/pull/94

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

Felix Nagel on 06/17  at  05:43 AM

<div id="commentNumber353" class="commentEntry">
<p>Sorry, ticket opened on GitHub.

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

andretti1977 on 06/17  at  08:40 AM