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

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

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

oops, have to add, i am using latest version of the plugin from SVN

http://code.google.com/p/verplan/source/browse/trunk/com_verplan/site/includes/js/plugins/ui.selectmenu.js?r=590

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

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

How someone provide an example of a callback please?

Could*

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.

@Liv Nice job! Thanks.

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

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.

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

^^^

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

@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

Thanks for this plugin !

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

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

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?

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

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?

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

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

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

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

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

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.

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

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

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

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

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

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.

Nice plugin.

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

@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

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

@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

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

@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

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

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