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

Posted by Scott on 06/19/2009

Topics:

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

Features

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

Usage

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


$('select').selectmenu();

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

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

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.

Comment by Andrew Rodgers on 06/19  at  09:22 PM

Once again, you have done a great job. Thanks for your efforts and contribution to the community.

Comment by W3Avenue Team on 06/19  at  09:35 PM

Very nice!

Comment by Nikola on 06/19  at  09:58 PM

Scott, this is really awesome. I can’t thank you enough! This will be most useful for me.

Comment by Richard on 06/20  at  03:54 AM

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!

Comment by James van Leuvaan on 06/20  at  06:11 AM

Damn this is neat stuff. Great work!

Comment by Jerome Bohg on 06/21  at  10:12 PM

very nice! reponse for F4 key?

Comment by Gesiel Mota on 06/22  at  07:35 PM

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?

Comment by LOVE_MOSS_NOT on 07/09  at  10:44 PM

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

Comment by Charlie Davey on 07/14  at  12:25 PM

It does not work in UI dialog.

Comment by Haiping Chan on 07/21  at  11:21 AM

Forgot to say you’ve got your first digg vote for this post. ;)

Comment by Vito Botta on 07/21  at  11:33 AM

I don’t know why but the first comment didn’t go through. BTW I had just said thank you :D

Comment by Vito Botta on 07/21  at  11:33 AM

That is an awesome piece of work!

Comment by Richard@Home on 07/22  at  04:09 PM

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?

Comment by R7S on 07/23  at  07:54 PM

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

Comment by Vito Botta on 07/23  at  08:03 PM

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

$(myselect)
.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).

Comment by Scott (Filament) on 07/23  at  08:26 PM

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.

Comment by R7S on 07/23  at  09:08 PM

Scott,

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

Comment by Vito Botta on 07/23  at  09:14 PM

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

Comment by R7S on 07/23  at  09:50 PM

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

Comment by Scott (Filament) on 07/23  at  09:56 PM

Filament do it again.  You guys are sick!

Comment by Paul Gardner on 07/24  at  08:53 AM

Hello

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

Cheers

Comment by R7S on 07/25  at  01:42 AM

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.  Not sure what style is changing the layout.  I’m using the demo page for testing.

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

Thx,

John

Comment by John Cole on 07/25  at  05:43 PM

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

Within body, I then have a

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

$(’selectmenu’).selectmenu({appendSelector:’[customnamespace]’});

Is there a better way to do this?

Comment by Nate on 07/26  at  05:40 PM

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

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

Hope this can help.

Regards,

jonathan

Comment by Jonathan Protzenko on 08/04  at  05:42 PM

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

Comment by ReTox on 08/06  at  05:47 PM

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}

Comment by Dan on 08/10  at  07:49 PM

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

Comment by Peter on 08/13  at  01:13 AM

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

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?

Comment by Brian Schweitzer on 08/15  at  10:46 PM

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

Comment by antu on 08/18  at  12:03 AM

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 ;

Comment by antu on 08/18  at  12:05 AM

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.
$(’#mySelectmenu’).val(’2’);

Comment by Darrin on 08/19  at  01:28 AM

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

Comment by Darrin on 08/20  at  02:16 AM

How do you dynamically set the selected element?

I tried to use
$(’#Menu’).val(’4’);
This seems to change the value of the html select but not the display name in the <span> tags
Am I doing something wrong?

Comment by Kris on 08/24  at  05:42 PM

@Kris: Use the selectmenu method to address the control once you’ve built it.

$(’#Menu’).selectmenu(’value’,4);

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

Comment by Scott (Filament) on 08/24  at  05:50 PM

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:

$("select").selectmenu();

This breaks:

$("select").selectmenu({
style:’dropdown’,
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…

Thanks!

Comment by Lise on 08/24  at  07:10 PM

@ Lise: could it be the trailing comma? Try removing the comma after 102 in your code example.

Comment by Scott (Filament) on 08/24  at  07:21 PM

Of course! I even read that the trailing comma was often the culprit but failed to make the connection. Thank you!!!!

Comment by Lise on 08/24  at  07:26 PM

try to name the select menu
<select name="mySelect" id="mySelect">
<option value="0">Some text</option>
...
</select>

$("#mySelect").selectmenu({
style:’dropdown’,
menuWidth: 102,
});

Comment by Kris on 08/24  at  07:31 PM

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!

Comment by Lise on 08/24  at  07:34 PM

your link “Grab the code!” section to the google server is broken need to add an “l” to the end of the link

Comment by Greg Wilker on 08/25  at  05:11 PM

@Greg Wilker, thanks for the note, the link is fixed now.

Comment by Maggie (Filament) on 08/25  at  05:17 PM

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

Comment by el chivo on 08/27  at  01:23 AM

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.

Comment by Brandon on 09/04  at  06:01 PM

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

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

Comment by nico on 09/05  at  04:18 AM

@Brandon ( http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber45 )

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

Comment by sompylasar on 09/06  at  02:48 PM

Has anyone figured out a workaround to make the selectmenu work within a UI Dialog (or jqModal Dialog)?

Comment by Jason Karns on 09/08  at  10:17 PM

@el chivo:

this is correct version:

line 163:

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

(index was missing)

Comment by ReTox on 09/11  at  02:33 PM

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+/,"_");

Comment by Subba Rao Pasupuleti on 09/21  at  08:45 PM

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

Ray

Comment by The Ray on 09/28  at  02:28 PM

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

Comment by Habib on 10/02  at  11:17 PM

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

Comment by Timm Stokke on 10/09  at  11:17 PM

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

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

Comment by Joris on 10/11  at  09:49 AM

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

to:

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

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!

Comment by Luiz Brandao on 10/12  at  09:03 PM

Hello again,

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

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

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

Bye.

Comment by Luiz Brandao on 10/12  at  11:03 PM

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

Comment by Stephen Young on 10/15  at  04:59 AM

After removing this line:

.data(’optionClasses’, selectOptionData.classes)

The plugin works.

Comment by Stephen Young on 10/16  at  04:32 AM

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

Thanks for spending time on doing all this great utilites.

Comment by TebboES on 10/31  at  03:19 AM

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.

Comment by Nathan Maves on 11/06  at  02:20 AM

This plugin is extremely useful and there are very few articles as complete as this one focusing more complete explanation.
Your blog and its articles have become a reference in my job. I have found a lot of information here and recommend it to everyone visiting the Filament Group.
Congratulations on the competence and success!
Thanks.

Comment by Relogio de Ponto on 11/13  at  10:36 PM

Hi.

How can I disable/enable selectmenu dynamically?

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

Code:

$.ajax({
url: ‘/search/get-models’,
data: {brand: $(this).val()},
beforeSend: function() {
$(’#model’)
.attr(’disabled’, ‘disabled’)
.selectmenu(’destroy’)
.selectmenu(auto.selectmenuOptions);
},
success: function(response) {
$(’#model’)
.html(response)
.removeAttr(’disabled’)
.selectmenu(’destroy’)
.selectmenu(auto.selectmenuOptions);
}
});

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?

Comment by umpirsky on 11/18  at  05:47 PM

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

Comment by Scott (Filament) on 11/18  at  06:27 PM

@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()});
});
brand.selectmenu({
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!

Comment by umpirsky on 11/19  at  03:06 PM

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

Comment by umpirsky on 11/20  at  02:24 PM

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’).selectmenu({style:’dropdown’});
$(’select#select2’).selectmenu({style:’dropdown’});

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

Thanks in advance for your advice.

Comment by Samuel Maulaz on 11/30  at  10:30 AM

@Samuel Maulaz Please read comments above, we talked about that.

Comment by umpirsky on 11/30  at  10:38 AM

So, if I understand what I must do, the logical way is to disable and enable after the select option values have been regenerated ?

Comment by Samuel Maulaz on 11/30  at  10:43 AM

@Samuel Maulaz A kind of, here is the example:

$.ajax({
url: ‘/search/get-options’,
beforeSend: function() {
$(’#id’).selectmenu(’disable’);
},
success: function(response) {
$(’#id’)
.html(response)
.selectmenu(’destroy’)
.selectmenu(selectmenuOptions);
}
});

Comment by umpirsky on 11/30  at  10:50 AM

Hi,

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.

Comment by Samuel Maulaz on 11/30  at  12:52 PM

@Samuel Maulaz NP ;)

Comment by umpirsky on 11/30  at  01:31 PM

This is an awesome plugin.  Going to save me all kinds of headaches I would of had originally.  Great work!

Comment by Morgan Craft on 11/30  at  10:59 PM

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

Comment by Paul Irish on 12/04  at  06:54 AM

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

Comment by Linda_Hoxman on 12/04  at  07:23 AM

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

find

//document click closes menu
jQuery(document)
.mousedown(function(event){
self.close(event);
});

add after :

jQuery(document)
.scroll(function(event){
self.close(event);
});

Comment by beshoo on 12/07  at  10:09 AM

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

Comment by umpirsky on 12/08  at  12:45 AM

One question, how do you add new elements to this dynamically?  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?

Thanks!

Comment by Andy H on 01/13  at  08:38 PM

@Andy Please read previous comments.

Comment by umpirsky on 01/13  at  09:15 PM

Hmm, I might be overlooking it, but I don’t see it up there.  Could you say who posted this and on what date?

Comment by Andy H on 01/13  at  11:12 PM

Maybe I’m not doing it right… trying to add a callback to submit the form upon selecting the option:
$(’#menu’).selectmenu({
style: ‘dropdown’,
change: function () {
$(’#category’).submit();
}
});

Comment by Colin on 01/19  at  02:33 AM

@Andy Check Comment by Scott (Filament) on 07/23 at 01:26 PM

Comment by umpirsky on 01/19  at  10:03 AM

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.

Regards,
J

Comment by Jamie on 01/21  at  12:11 PM

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

Comment by Scott (Filament) on 01/21  at  04:06 PM

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

Comment by m on 01/22  at  04:03 AM

Hi.

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

Comment by umpirsky on 01/25  at  01:32 PM

Also, after update to jqueryui 1.8b1,
$(’#id’).selectmenu(’disable’); wont work!

Regards,
Sasa Stamenkovic.

Comment by umpirsky on 01/25  at  04:07 PM

Wow........................

This is Amazing....

Comment by Neeraj Sahu on 01/28  at  12:41 PM

Following up on the @Kris thread regarding dynamically setting the selected element. 

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.

Comment by rylan on 02/03  at  10:09 PM

Hi.

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.

Comment by umpirsky on 02/13  at  06:03 PM

Is this broken with 1.4?

Comment by TomC on 02/16  at  10:01 PM

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 !

Comment by Lyne Boucher on 02/16  at  11:43 PM

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.

Comment by David Radcliffe on 02/17  at  06:54 PM

When SELECT is inside a div with overflow:scroll, the script makes extra space at the bottom of the page; see this page:

http://www.dabug.be/index.html

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?

Comment by Dave on 02/18  at  12:36 PM

@Dave I have same problem. I cant say if the reason is overflow, but space at the bottom of the page is there.

Comment by umpirsky on 02/18  at  01:11 PM

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…

Solutions?

Comment by amperini on 02/19  at  04:26 PM

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.

Comment by Matt Tew on 02/24  at  12:18 AM

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

Comment by Scott (Filament) on 02/24  at  12:32 AM

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.

Comment by Tomo on 02/24  at  02:45 AM

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

Comment by Scott (Filament) on 02/24  at  02:48 AM

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

Comment by umpirsky on 02/24  at  10:07 AM

it doesnt work correctly in IE 6-7 (same as this site) and its very wistful

Comment by Sergey on 02/27  at  11:57 AM

No solutions or workarounds found yet about this FF 3.6 bug of scroll when a max height is set ?

thank you…

Comment by Lyne Boucher on 02/27  at  12:53 PM

Great stuff!

Is there a way to disable an option item?

Comment by Thilo on 03/02  at  02:20 PM

Works great, but doesn’t seem to respond to form.reset() .....

Comment by Justin on 03/03  at  09:24 PM

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.

Comment by mitt on 03/05  at  03:22 PM

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!

Comment by umpirsky on 03/09  at  12:12 AM

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.

Comment by Justin on 03/09  at  12:32 AM

Hi,

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?

Rob

Comment by Robert Hallatt on 03/10  at  12:29 AM

This plugin has support for multiple selects???

Comment by Lucas Martins on 03/10  at  10:06 PM

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.

Comment by Lyne Boucher on 03/10  at  10:46 PM

@Lyne Boucher Any online demo?

Comment by umpirsky on 03/10  at  10:52 PM

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)

Comment by Lyne Boucher on 03/10  at  11:00 PM

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

Comment by Dave on 03/11  at  05:41 AM

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.

Comment by Saddam Azad on 03/23  at  06:58 PM

Hi,

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?

Thanks

Comment by washi on 03/24  at  01:42 PM

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;

Comment by nobody on 03/24  at  05:54 PM

For those poeple using jQuery 1.4 & 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: http://jqueryui.com/docs/Upgrade_Guide

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.

Comment by Steve Esson on 03/24  at  07:14 PM

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?

Comment by Gabriel Falkenberg on 03/25  at  02:00 PM

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

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

Comment by Philippe on 03/30  at  02:22 PM

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 !

Cheers

Comment by Alexis Gruet on 04/02  at  01:15 PM

I use this extension on my site, but I get some empty space at the bottom of the page. Example http://automobi.li/oglas/Mercedes-Benz-180-Ponton/105 . 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?

Comment by umpirsky on 04/16  at  01:29 PM

Hello,

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

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

:-(

Comment by Gabriel on 04/17  at  06:05 AM

Small arrows to scroll not working on Mozilla. How can I fix this problem.

Comment by Todor on 04/21  at  03:23 PM

Thanks Steve Esson for the insight on making this work with UI 1.8+, it did the trick!  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.  I finally realized I was using a newer version of jquery UI.

Comment by Wilson R on 04/21  at  10:05 PM

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

Comment by Angela on 04/25  at  01:17 AM

Disabling selectmenu stopped working after upgrade to ui 1.8.

Comment by umpirsky on 04/25  at  01:19 AM

@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
$(document)
.mousedown(function(event){
self.close(event);
});

Add the following:

$(document).click(function(){
self.close();
});

I hope this helps!

Comment by Arnell D on 04/27  at  05:34 PM

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:

.mouseup(function(event){
/*
if(self._safemouseup){
var changed = $(this).data(’index’) != self._selectedIndex();
self.value($(this).data(’index’));
self.select(event);
if(changed){ self.change(event); }
self.close(event,true);
}
*/
return false;
})
.click(function(event){
if(self._safemouseup){
var changed = $(this).data(’index’) != self._selectedIndex();
self.value($(this).data(’index’));
self.select(event);
if(changed){ self.change(event); }
self.close(event,true);
}
return false;
})

Can you please confirm this behaviour and this solution?

Bye,

ROb

Comment by Roberto Rossi on 05/03  at  03:40 PM

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

Comment by Scott (Filament) on 05/03  at  03:50 PM

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.

Comment by Roberto Rossi on 05/03  at  03:55 PM

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

Comment by Thilo on 05/04  at  08:34 AM

To fix the “Uncaught exception: TypeError: Cannot convert ‘selectOptionData[this._selectedIndex()]’ to object” error to Display the Current Selected Item

Change Line 291

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

To

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

this Works with jQuery 1.4.2 and jQuery UI 1.8

Comment by Ingo Herbote on 05/07  at  04:58 PM

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

Comment by Andreas on 05/12  at  12:56 AM

@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

Comment by Steve Esson on 05/12  at  10:17 AM

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

Comment by Andreas on 05/12  at  11:42 AM

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

Comment by Andreas on 05/12  at  11:45 AM

Comment by Steve Esson on 05/12  at  02:10 PM

@Steve: Great => Thank you!

Comment by Andreas on 05/12  at  07:21 PM

What about select boxes with multiple attribute?
I guess it doesn’t support it, right?
It would be great if it does…

Comment by Rauf on 05/18  at  10:16 AM

Disable/enable don’t work any more!

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

jQuery v1.4.2
jQuery UI 1.8.1

Comment by umpirsky on 05/18  at  09:13 PM

@umpirsky: check a few comments before yours. I think @Andreas has you covered.

Comment by Scott (Filament) on 05/18  at  09:16 PM

@Scott Thank you very much for the answer, but unfortunatelly,

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

Comment by umpirsky on 05/18  at  09:29 PM

@Scott And $(’#select’).selectmenu({disabled: true}); cloned (doubled) the selectmenu!

Comment by umpirsky on 05/18  at  09:32 PM

@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

Comment by Scott (Filament) on 05/18  at  09:46 PM

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

Comment by umpirsky on 05/19  at  08:20 AM

@umpirsky:
I also Use jQuery 1.4.2 and jQuery UI 1.8.1

I did everything described here:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber116

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

Comment by Andreas on 05/19  at  08:37 AM

@Andreas Thanks, that worked like a charm.

After this changes I’m able to disable it with

$(’#select’).selectmenu(’disable’);

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

Comment by umpirsky on 05/19  at  08:56 AM

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

Comment by Carl on 05/28  at  05:56 PM

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

Comment by Carl on 05/28  at  06:07 PM

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.

Comment by michaelR on 05/31  at  10:00 AM

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

Comment by Mauro on 06/03  at  10:49 AM

@Mauro: The link your’ve provided works for me (Firefox) without problems. Have you tried another browser? Cache problem?

Andreas

Comment by Andreas on 06/03  at  11:30 AM

@Andreas yes sorry about that try again now ;) http://widgets.widgadget.com/test/selectmenu.html

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

Thanks!

Comment by Mauro on 06/03  at  11:42 AM

@Mauro: Try to add the ui.selecmenu.css ;-)

Comment by Andreas on 06/03  at  12:39 PM

@Andreas Ooops! Heheh, Sorry about that :S It worked great, thanks a lot!

Comment by Mauro on 06/03  at  12:45 PM

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.

Comment by Alex on 06/04  at  06:01 AM

My solution of disable status:
$(’select#model’).selectmenu({style:’dropdown’});
$(’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

Comment by Lecktor on 06/06  at  02:59 PM

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

Comment by globsoft on 06/10  at  08:13 PM

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

Comment by etsgrafica on 06/21  at  02:27 PM

Great plugin..
Can it be extended with sub-menu’s?

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

Comment by CB on 06/21  at  10:40 PM

@CB: yep, just use optgroups in your markup.

Comment by Scott (Filament) on 06/21  at  10:48 PM

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:

$(’theSelect’).val(’newvalue’);

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.

Comment by da on 06/23  at  12:48 AM

Comment by Steve Esson on 06/23  at  09:35 AM

@etsgrafica

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):
.click(function(){
return false;
})

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

Comment by vadims on 06/25  at  10:26 AM

How do I add the selectmenu to modal dialog? does not work, appears below the modal window.

Comment by Mauricio G. on 06/26  at  07:01 PM

Hello,

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

Comment by solefald on 06/26  at  08:12 PM

Comment by solefald on 06/26  at  08:19 PM

@Arnell D : A BIG thank you, it works perfectly !!

Comment by Lyne Boucher on 06/27  at  09:51 PM

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

Comment by Mauricio G. on 06/27  at  11:20 PM

How someone provide an example of a callback please?

Comment by Ryan W on 06/29  at  10:45 AM

Could*

Comment by Ryan W on 06/29  at  10:45 AM

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.

Comment by Liv on 07/02  at  11:17 AM

@Liv Nice job! Thanks.

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

Comment by automobi.li on 07/02  at  11:27 AM

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)
{
this.list
.appendTo(’body’)
.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>’);
else
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.

Comment by Mattia on 07/02  at  12:13 PM

Anyone know if this will work with the JQuery Validation plugin?

Comment by Jd on 07/03  at  11:30 PM

^^^

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

Comment by Mattia on 07/04  at  09:25 AM

@jd

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

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

addErrorClass: function() { // UiUSA Custom method
this.newelement.addClass(this.options.errorClass);
}
removeErrorClass: function() { // UiUSA Custom method
this.newelement.removeClass(this.options.errorClass);
}

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
$select.selectmenu(’addErrorClass’);
}
});
...

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.

HTH
Steve

Comment by Steve Esson on 07/05  at  10:59 AM

Thanks for this plugin !

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

Comment by Samuel Sanchez on 07/05  at  10:59 AM

Once again, you guys are doing a wonderful job, thanks a lot

Comment by Ethan on 07/07  at  10:20 AM

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?

Comment by Jd on 07/08  at  11:54 PM

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

Comment by Bill Caswell on 07/12  at  10:57 PM

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?

Comment by Jarvis on 07/19  at  11:55 PM

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

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

Comment by Reda on 07/20  at  03:13 PM

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

Comment by Shawn Marincas on 07/28  at  10:55 PM

nobody got a solution for my problems???? :((

Comment by Reda on 07/29  at  05:08 AM

@Reda

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

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

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

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

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

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

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

Comment by Shawn Marincas on 07/29  at  06:30 AM

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

Comment by Reda on 07/30  at  10:09 PM

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.

Comment by Andrew on 07/31  at  03:45 AM

There are issues with version 1.8.2. of jquery-ui - for example concerning the width of the selectmenues ...

Comment by Thorsten on 08/05  at  05:52 PM

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

Comment by Shawn M. on 08/05  at  06:47 PM

I’ve fixed a few bugs and compatibility problems within my jQuery UI fork at GitHub to push further development of this plugin:
http://github.com/fnagel/jquery-ui/tree/selectmenu

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.

Thanks
Felix Nagel

Comment by Felix Nagel on 08/12  at  10:11 AM

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

Comment by herybarkan on 08/16  at  06:36 AM

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

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

Many thanks in advance!

Comment by dillion on 08/16  at  11:10 AM

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.

Comment by Ollie Wells on 08/16  at  11:18 AM

Nice plugin.

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

Comment by Peter on 08/17  at  09:28 AM

@Filament
very nice plugin - great job!

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

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

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

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!

Cheers,
Mehdi Haresi

Comment by Mehdi Haresi on 08/21  at  05:22 PM

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

Comment by Ethan Zhagn on 08/23  at  06:43 AM

@Ethan Zhagn
This is already foxed, please see my comment above:
http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber190

@ALL
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:
http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber190

Comment by Felix Nagel on 08/23  at  10:54 AM

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

Comment by cg on 08/26  at  05:51 AM

@cg
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,
Felix

Comment by Felix Nagel on 08/26  at  09:24 AM

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

Comment by herybarkan on 08/26  at  10:10 AM

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

Comment by Ivan Kuznetsov on 08/28  at  07:01 PM

@Felix Nagel or Others people…
please…
any one can solve my problem…
http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber200
thanks

Comment by herybarkan on 08/29  at  10:00 AM

@Ivan
This is already fixed, but thanks.

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

Comment by Felix Nagel on 08/29  at  11:03 PM

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

Comment by herybarkan on 08/30  at  05:56 AM

@herybarkan

Try something like this:

$(function(){
$(’select#mySelect’).selectmenu({
style:’dropdown’,
select: function(event, options) {
$.ajax({
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)
$("#result_data").html(value).selectmenu();
}
});
}
});
});
</pre>

Comment by Felix Nagel on 08/30  at  11:38 PM

How can I get the value of a selected element?

..and is there some manual for using events?

Comment by Philip on 09/01  at  01:03 PM

@Philipp
Please take a look the comment above yours.

Comment by Felix Nagel on 09/01  at  02:04 PM

@Felix Nagel

Hi,

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

Comment by Philipp on 09/01  at  02:29 PM

Hello,

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’);">
<?php
foreach($tabMois as $key => $value) {
?>
<option <?php if($key == $moisDefault) echo "selected='selected'"; ?> value="<?php echo $key; ?>"><?php echo $key . " - " . utf8_encode($value); ?></option>
<?php
}
?>
</select>

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

Comment by Paul on 09/01  at  09:42 PM

@ Felix - thanks for your response. I take it that the latest version of selectmenu has fixed the issue that I raised earlier? http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber192

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

Many thanks in advance. :o)

Comment by dillion on 09/03  at  12:50 AM

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

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

Comment by Felix Nagel on 09/03  at  01:00 AM

Hello,

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>
</select>

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

Thanks

Comment by Paul on 09/07  at  04:45 PM

@Paul
Please provide a full example within a zip file.

Comment by Felix Nagel on 09/07  at  05:56 PM

@ 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
script
please can you fix my script
Please send to my email

thanks for your help

Comment by herybarkan on 09/08  at  05:41 AM

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.

Comment by Facundo on 09/10  at  04:19 AM

Nice job Felix Nagel, Your “forked” version seems to work great.  Any talk about making this plugin part of the jQuery UI core?

Comment by Michael Reed on 09/10  at  08:51 AM

@ Facundo

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

Comment by herybarkan on 09/10  at  10:18 AM

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

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

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

Comment by Felix Nagel on 09/10  at  01:44 PM

is it please possible to unsubscribe to this thread? thanks

Comment by Reda on 09/10  at  02:34 PM

u do very well, my web site is a laptop battery site, Recently i want to use jquery in my site,but it run slowly, i don’t know why

Comment by huangji on 09/10  at  02:36 PM

@Reda
Just check the email you receive with every comment.

Comment by Felix Nagel on 09/10  at  02:50 PM

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 });
selectmenu(’disable’);

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

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

Comment by Revive on 09/12  at  07:30 PM

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

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

Comment by Felix Nagel on 09/12  at  11:53 PM

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

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

Comment by Revive on 09/13  at  02:56 AM

Here are some other variations I’ve tried.. without luck:

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

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!

Comment by Revive on 09/13  at  04:00 AM

Comment by Felix Nagel on 09/14  at  01:41 AM

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

Comment by Revive on 09/14  at  03:51 AM

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

Comment by Marvin Herbold on 09/21  at  05:48 AM

Any word on the disable function(s) ??

Please check my previous comments:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber224
and
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/#commentNumber225

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

Comment by Revive on 09/24  at  08:41 AM

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

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

Comment by Felix Nagel on 09/24  at  11:43 AM

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>
</select>

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

Comment by Revive on 09/24  at  12:24 PM

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

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

Comment by Felix Nagel on 09/24  at  12:35 PM

#Felix,
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
$(’#messaging_recipient_list’).selectmenu(’disable’);
// 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
$(’#messaging_recipient_list’).selectmenu(’enable’);
// doesn’t work
$(’#messaging_recipient_list’).selectmenu(’option’,’enabled’, true);
// doesn’t work
$(’#messaging_recipient_list’).attr(’disabled’, ‘’);
// doesn’t work
$(’#messaging_recipient_list’).removeAttr(’disabled’);
// 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’);

Thoughts?

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

Comment by Revive on 09/24  at  12:41 PM

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

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

Comment by Felix Nagel on 09/24  at  12:57 PM

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

Comment by Revive on 09/24  at  01:04 PM

@Felix - Hello.  I have the same thing you do - I have a <select disabled="disabled"> 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.  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.

Comment by Marvin Herbold on 09/24  at  04:41 PM

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

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

Comment by Felix Nagel on 09/26  at  06:28 PM

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:

http://www.ainterpreting.com/temp/select.html

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?

Comment by Marvin Herbold on 09/27  at  07:10 PM

Were you able to reproduce the issue with the web link I provided?

Comment by Marvin Herbold on 09/29  at  06:57 AM

@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

Comment by Felix Nagel on 09/30  at  01:42 AM

I followed your link and found an updated ui.selectmenu.js script and downloaded it and tested my website out with it… IT WORKS!  I would suggest updating the web links on this page (Under “Grab the Code!") to have the latest code.  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.

Comment by Marvin Herbold on 09/30  at  02:13 AM

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;
this.list.find(’li:lt(’+this._selectedIndex()+’)’).each(function(){
scrolledAmt -= $(this).outerHeight();
});

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

Comment by Fabsch on 10/01  at  10:28 AM

Having a difficult time creating a selectmenu on the fly, and having the width come out correct.  Please see below code or live version at http://www.villascape.net/testing/selectmenu/selected.html Thank you, Michael

$(function()
{
$("#selectClone").hide();
//$("select.selectmenu").selectmenu();
$(’#button’).click(function(){
var selectClone = $("#selectClone").clone(true);
selectClone.removeAttr(’id’);
selectClone.show();
$(’select’,selectClone).val($(’#selectSetting’).val());
//selectClone.selectmenu();
$("#container").append(selectClone);
$("#container div:last").find(’select’).selectmenu({width:100});
});
});

</head>
<body>

<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>
</div>

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

</body>

Comment by Michael Reed on 10/02  at  09:56 PM

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

Comment by Revive on 10/03  at  03:04 AM

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

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

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

@All
Please consider a donation as I support you my spare time:
http://www.felixnagel.com/donate

Comment by Felix Nagel on 10/04  at  10:39 AM

Love the plugin ! 

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

Comment by al; on 10/04  at  02:38 PM

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

Thanks

Comment by Michael Reed on 10/04  at  03:15 PM

Also,

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>
<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>
</optgroup>
</select>
</div>

Comment by al; on 10/04  at  04:02 PM

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

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

Comment by Felix Nagel on 10/05  at  01:01 AM

Felix,

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

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

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

al;

Comment by al; on 10/05  at  01:51 AM

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(retainFocus){this.newelement[0].focus();}
if(this.options.doBlur){this.newelement[0].blur();} // uses option value

Comment by al; on 10/05  at  02:54 AM

as regards disabled options:

selectOptionData.push({
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>’)

[...]

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

[...]

.bind(’mouseover focus’, function(){
self._selectedOptionLi().addClass(activeClass);
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’);
}

Comment by al; on 10/05  at  04:19 AM

as regards menu positioning :

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

Comment by al; on 10/05  at  01:29 PM

as regards my previous defocus() suggestion

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

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

Comment by al; on 10/05  at  01:50 PM

This is missing some significant keyboard functionality.  Alt+down/up is standard for opening the drop down.  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.

Comment by phazei on 10/07  at  02:02 AM

PLEASE DO NOT POST PATCHES OR BUGS HERE!
Use the GitHub issues at: http://github.com/fnagel/jquery-ui/issues

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

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

Comment by Felix Nagel on 10/08  at  01:12 AM

@felix

will do!

@phazei

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

al;

Comment by al; on 10/08  at  01:20 AM

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

Comment by Felix Nagel on 10/08  at  01:23 AM

to disable or enable it change the following lines:

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

to:

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

Comment by Bryan portillo on 10/08  at  01:39 AM

Hi

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

Comment by szamdev on 10/08  at  11:48 AM

how do i remove all / add to the dropdown.
the following code doesn’t work.
jQuery(’select#ListIdFrom’).selectmenu(’destroy’);
jQuery(’select#ListIdFrom’).replaceWith(’<select><option value="test">something</Option></select>’)
jQuery(’select#ListIdFrom’).selectmenu();

Comment by lmdik on 10/11  at  03:47 PM

finally this one works.

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

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

select.selectmenu(’destroy’);

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

};

Comment by lmdik on 10/11  at  04:06 PM

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’); .
select.selectmenu(
{style:’dropdown’,maxHeight:300}
);

};

Comment by lmdik on 10/11  at  04:36 PM

perfet

Comment by chinateam on 10/12  at  03:53 PM

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.

Comment by Marvin Herbold on 10/13  at  03:08 AM

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

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

Comment by Felix Nagel on 10/13  at  04:00 PM

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?

thanks!

Comment by Vincenzo on 10/18  at  04:58 AM

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

Comment by Felix Nagel on 10/18  at  11:06 AM

@felix

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,

al;

Comment by al; on 10/18  at  02:28 PM

@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

Comment by Vincenzo on 10/18  at  03:33 PM

@Felix Nagel

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

Comment by Vincenzo on 10/18  at  03:39 PM

@ Felix Nagel
the bug is still present on the updated version.

Comment by Bryan portillo on 10/18  at  04:08 PM

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

Comment by Scott (Filament) on 10/18  at  04:41 PM

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…

Comment by Raphael Filipe Schubert on 10/20  at  11:52 PM

Hello!

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?

Comment by D on 10/22  at  09:49 AM

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

Comment by russ on 10/23  at  07:10 AM

Hello,
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!
Pierre

Comment by Pierre on 10/25  at  05:21 PM

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

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

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

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

Comment by Felix Nagel on 10/25  at  11:15 PM

Hello,
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() {
$("#dialog-form").dialog({
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’); }
});

$(’#create-user’)
.button()
.click(function() {
$(’#dialog-form’).dialog(’open’);
$(’select#designation’).selectmenu({style:’dropdown’,menuWidth: 247,maxHeight: 250});
});
});

Comment by dyapa srikanth on 11/08  at  10:32 AM

that is just css problem
see this link
https://github.com/fnagel/jquery-ui
go to themes folder
you can find the solution

Comment by dyapa srikanth on 11/08  at  12:32 PM

Здравствуйте! А будет ли работать с версией jquery 1.2.3min, а то специально для этого не хочется подключать ещё один. Сайт efutbolka.ru

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

Comment by прикольные футболки on 11/09  at  12:29 AM

Thanks! Very nice script.

Comment by космос on 11/09  at  12:30 AM

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

Comment by Felix Nagel on 11/10  at  02:27 AM

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

Comment by Vincenzo on 11/14  at  08:37 PM

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.

Comment by Vincenzo on 11/15  at  04:40 PM

@Vincenzo

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.

Comment by Felix Nagel on 11/15  at  10:07 PM

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

Comment by Vincenzo on 11/16  at  05:06 AM

hanks for the hint about the value method. I’ve managed to work!  sağol

Comment by porno on 11/21  at  04:10 AM

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

Comment by Humberto on 11/21  at  02:49 PM

I find a solution: https://github.com/fnagel/jquery-ui/issues#issue/23/comment/542070
Thanks gyus, great job!

Comment by Humberto on 11/21  at  03:02 PM

at the line of 235, i modify like this
var selectWidth = this.element.width()+16;
the 16 is the pic’s width

Comment by bluetouch.chen on 11/29  at  07:21 AM

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

Comment by Matteo on 12/03  at  01:48 PM

@Matteo

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

http://stackoverflow.com/questions/4193765/select-next-option-in-jquery-selectmenu/4193849#4193849

Comment by Vincenzo on 12/03  at  04:48 PM

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?

Comment by luki on 12/06  at  07:03 PM

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

Comment by Felix Nagel on 12/06  at  07:11 PM

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.

Comment by Scott Morrison on 12/16  at  08:16 PM

@Scott
Please open a ticket here https://github.com/fnagel/jquery-ui/issues

Comment by Felix Nagel on 01/14  at  01:36 PM

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.

Comment by dyapa srikanth on 01/22  at  01:32 PM

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

CJ

Comment by Curly Joe on 02/01  at  10:14 PM

@Dyapa and
@Curly
Please open a single issue at GitHub for every feature request, question or bug report: https://github.com/fnagel/jquery-ui/issues

@Dyapa
Selectmenu widget keeps the classes of the original select. Does that help?

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

Comment by Felix Nagel on 02/01  at  11:04 PM

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

Comment by Curly Joe on 02/01  at  11:27 PM

Hi,

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

Thanks!

Comment by Lou Carey on 02/08  at  05:19 AM

Thanx..very nice tutorial

Comment by Rahul r calicut on 02/22  at  11:11 AM

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.

Thanks!
JC

Comment by James Caruso on 03/09  at  06:05 PM

@JC
Did you tried the latest version from my GitHub branch?

Comment by Felix Nagel on 03/10  at  12:04 PM

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

Cheers!
JC

Comment by James Caruso on 03/10  at  03:21 PM

Current commits should use jQuery 1.4.4, thats right. Please do NOT post errors here, please use GitHub’s issues bug tracking: https://github.com/fnagel/jquery-ui/issues

Comment by Felix Nagel on 03/10  at  03:54 PM

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!

Cheers!
- JC

Comment by James Caruso on 03/10  at  04:00 PM

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?

Comment by Lars on 03/12  at  11:04 PM

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.

Comment by Mikael on 03/15  at  05:04 PM

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.

Comment by James Caruso on 03/15  at  05:15 PM

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: http://jsfiddle.net/fnagel/hsn95/embedded/result/

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.

Comment by Felix Nagel on 03/15  at  05:22 PM

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”

Comment by vaik on 03/21  at  04:38 AM

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”

Comment by vaik on 03/21  at  04:39 AM

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

Comment by vaik on 03/21  at  09:52 AM

@vaik
Please open a issue at GitHUb, no bugtracking here. https://github.com/fnagel/jquery-ui/issues

Comment by Felix Nagel on 03/21  at  10:32 AM

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

Comment by Jon on 03/21  at  12:22 PM

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.

Comment by Dietmar on 03/30  at  10:31 AM

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

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

Comment by Felix Nagel on 03/30  at  01:05 PM

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

Comment by Raj on 04/08  at  01:10 PM

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

Comment by Felix Nagel on 04/08  at  01:22 PM

Hi. Selectmenu not worked in jquery tabs into other tabs except #a tab.

Comment by Arshak Khazaryan on 04/12  at  09:22 AM

@Arshak
Please read the Wiki before posting, thanks.
https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Comment by Felix Nagel on 04/12  at  09:34 AM

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 !

Comment by Abspirit on 04/18  at  08:17 PM

@Abspriti
Please visit GitHubs issues for getting help.

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

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

Comment by Felix Nagel on 04/18  at  09:23 PM

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.

Comment by Hans Mueller on 04/21  at  07:25 AM

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

Comment by Felix Nagel on 04/21  at  09:36 AM

These are the nicest drop down menu features I’ve ever come across.  Very slick and nice! Thanks for sharing and keep up the great work!

Comment by Peter on 05/09  at  05:58 PM

I’ve downloaded the code from http://github.com/fnagel/jquery-ui (1.9m2.zip) and any of the files from archive doesn’t have a declaration of the ‘selectmenu’ method.
Very bad!

Comment by Wall Tearer on 05/12  at  02:44 PM

Just click the download button with the pop-up. You’ve downloaded the jQuery 1.9 milstone 2 source.

Comment by Felix Nagel on 05/12  at  03:15 PM

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){
$(’label[for=’+this.newelement.prop(’id’)+’]’)
.prop(’for’,this.element.prop(’id’))
.unbind(’click’);
this.newelement.remove();
this.list.remove();
this.element.show();
}else{
$(’label[for=’+this.newelement.attr(’id’)+’]’)
.attr(’for’,this.element.attr(’id’))
.unbind(’click’);
this.newelement.remove();
this.list.remove();
this.element.show();
}

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

Comment by Jon Howard on 05/14  at  01:30 AM

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

Comment by Christian Thaele on 05/24  at  04:20 PM

Hey Christian, please take a look here: https://github.com/fnagel/jquery-ui/issues#issue/58

Comment by Felix Nagel on 05/24  at  04:22 PM

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

Comment by Felix Nagel on 05/24  at  04:32 PM

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

Comment by Christian Thaele on 05/24  at  05:17 PM

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

Comment by Felix Nagel on 05/24  at  05:23 PM

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

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

I tried several options, seems nothing going my way

Comment by MANNSREE on 05/31  at  05:59 PM

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

Comment by Felix Nagel on 05/31  at  06:10 PM

Hey Cristian,
could you looke here? http://huehnerauge.net

Comment by Micheal on 06/01  at  07:08 PM

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() {
self._refreshPosition();
o.ready();
}, 200);
...
})(jQuery);
_________________________________________________________
Problem with the generated “ul” and the missing “value” attribute.

With this sample,
<select id="country" name="country">
...
<option value="fr">France</option>
...
</select>
and because the generated “ul li a” just contains the label of the associated option, I had to
$(target).selectmenu({
ready: function() {
$(’#country-menu li a’).each(function() {
var value = $(this).text();
value = $(’#country option’).filter(function() {
return $(this).text() == value;
}).val();
$(this).css({
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.

Comment by Gorcyn on 06/03  at  05:04 PM

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

Comment by Felix Nagel on 06/03  at  05:21 PM

disabled:
$(this).attr( ‘disabled’, ‘disabled’);

enabled:
$(this).removeAttr(’disabled’).selectmenu(’destroy’);
$(this).selectmenu();

espero que les sirva.

Comment by javi venta on 06/13  at  06:10 PM

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

Comment by andretti1977 on 06/14  at  12:26 PM

@javi venta
There are some more methods available, take a look here: https://github.com/fnagel/jquery-ui/wiki/Selectmenu

@andretti1977
The plugin supports multiple type ahead, at least it should. Did you download the latest version or stable (v1.1) version from GitHub?

Comment by Felix Nagel on 06/14  at  08:23 PM

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

Comment by andretti1977 on 06/15  at  05:28 PM

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

Comment by Felix Nagel on 06/15  at  05:52 PM

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?

Comment by andretti1977 on 06/15  at  06:24 PM

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

Comment by Felix Nagel on 06/15  at  09:54 PM

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

http://jsfiddle.net/NNEQs/

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

Comment by andretti1977 on 06/17  at  11:03 AM

this link has correct css. Try it with IE7-8 and FF. Remeber: modal = true bad behaviour, modal = false, correct behaviour

http://jsfiddle.net/teo_/mjj3s/1/

Comment by andretti1977 on 06/17  at  11:33 AM

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:

http://jsfiddle.net/VTqTx/

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.

Comment by andretti1977 on 06/17  at  12:01 PM

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

Comment by Felix Nagel on 06/17  at  12:43 PM

Sorry, ticket opened on GitHub.

Comment by andretti1977 on 06/17  at  03:40 PM

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site