jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
Posted by Scott on 06/19/2009
- Topics:
- accessibility
- css
- jQuery
- jQuery UI
- progressive enhancement
- ThemeRoller
- ui design
- usability
- visual design
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.
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!
The source code for this plugin is in jQuery UI's open-source SVN repository. You can view the demo page here: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html. To use the code, you'll need ui.selectmenu.js and ui.selectmenu.css (and of course, jQuery, jQuery UI core, and a jQuery UI theme). Check out the source of the demo page to find references to all necessary dependencies.
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).
Enjoy our blog? You'll love our book.
For info and pre-order: 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 02: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 02:35 PM
Very nice!
Comment by Nikola on 06/19 at 02: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/19 at 08:54 PM
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/19 at 11:11 PM
Damn this is neat stuff. Great work!
Comment by Jerome Bohg on 06/21 at 03:12 PM
very nice! reponse for F4 key?
Comment by Gesiel Mota on 06/22 at 12: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 03: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 05:25 AM
It does not work in UI dialog.
Comment by Haiping Chan on 07/21 at 04:21 AM
Forgot to say you’ve got your first digg vote for this post.
Comment by Vito Botta on 07/21 at 04: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 04:33 AM
That is an awesome piece of work!
Comment by Richard@Home on 07/22 at 09:09 AM
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 12: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 01: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 01: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 02: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 02: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 02: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 02:56 PM
Filament do it again. You guys are sick!
Comment by Paul Gardner on 07/24 at 01: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/24 at 06:42 PM
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 10:43 AM
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 10:40 AM
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 10:42 AM
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 10:47 AM
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 12: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/12 at 06:13 PM
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 03: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/17 at 05:03 PM
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/17 at 05:05 PM
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/18 at 06:28 PM
Solved the display problem.
I needed to set the selected item first and then apply the selectmenu.
Comment by Darrin on 08/19 at 07:16 PM
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 10:42 AM
@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 10:50 AM
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 12: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 12: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 12: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 12: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 12: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 10:11 AM
@Greg Wilker, thanks for the note, the link is fixed now.
Comment by Maggie (Filament) on 08/25 at 10:17 AM
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/26 at 06:23 PM
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 11:01 AM
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/04 at 09:18 PM
@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 07:48 AM
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 03: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 07:33 AM
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 01: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 07:28 AM
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 04: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 04: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 02: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 02: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 04: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/14 at 09:59 PM
After removing this line:
.data(’optionClasses’, selectOptionData.classes)
The plugin works.
Comment by Stephen Young on 10/15 at 09:32 PM
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/30 at 08:19 PM
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/05 at 06:20 PM
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 02: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 09:47 AM
@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 10:27 AM
@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 07:06 AM
@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 06:24 AM
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 02:30 AM
@Samuel Maulaz Please read comments above, we talked about that.
Comment by umpirsky on 11/30 at 02: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 02: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 02: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 04:52 AM
@Samuel Maulaz NP
Comment by umpirsky on 11/30 at 05:31 AM
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 02: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/03 at 10:54 PM
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/03 at 11:23 PM
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 02: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/07 at 04:45 PM
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 12:38 PM
@Andy Please read previous comments.
Comment by umpirsky on 01/13 at 01: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 03: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/18 at 06:33 PM
@Andy Check Comment by Scott (Filament) on 07/23 at 01:26 PM
Comment by umpirsky on 01/19 at 02: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 04:11 AM
@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 08:06 AM
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/21 at 08:03 PM
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 05:32 AM
Also, after update to jqueryui 1.8b1,
$(’#id’).selectmenu(’disable’); wont work!
Regards,
Sasa Stamenkovic.
Comment by umpirsky on 01/25 at 08:07 AM
Wow........................
This is Amazing....
Comment by Neeraj Sahu on 01/28 at 04:41 AM
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 02:09 PM