Font families are the same but font-weight is different which leads to a noticeable jump in the width of text.

The format callback certainly doesn't match the one in the spec...not that it ought to. Format should be (and is) a callback, not a hash of find and replaces. The _formatText method ought to pass the text and the actual OPTION element to the format callback, instead of just the text. This allows for much more versatility in formatting the list items.

There is also a bug in type-ahead that eats up ctrl+keypresses. Surprised no one ran into this, as it breaks ctrl-r!

There is no reason that maxHeight shouldn't be compatible with dropdown style, in my estimation. I was using maxHeight on a selectmenu, but it was getting jittery over the window edge. When i took out the if (style=="popup") in the mouseup that uses the timeout to delay for the safemouseup, the maxHeight works fine in both styles.

What's the hold up with this? This seems like a much more fundamental, and core widget than something like autocomplete (which I can build myself) and shadow (which I won't even use because the slow-down isn't worth the minor visual flair). Yet, it's rated as very low priority?!

I'm sure everyone here that has used jquery ui in a project has run into the situation where 90% of your widgets are looking nice and consistent. You can replace all your buttons and text inputs, with equivalent markup and jquery ui styles (ui-state-default). We don't need to do anything special for text inputs to achieve a similar look (background + border are sufficient here). The things you can't really style in a satisfying way without javascript are select menus and radio/checkbox buttons. The normal HTML widgets (as well as file uploads and fieldsets) are too wonky in their styling.

Not only is this way too low priority (IMHO), unlike some of the other proposals on here, this one is nearly complete. It's also a plugin that I would hate to write myself, without nice community to help support it . Transparently replacing HTML select widgets better be done properly, and when some random use case comes up where it's broken it's great to have lots of eyes on it to fix it. If your fancy select widget is broken in ie 7 and you can't change a parameter in the back end of your web app because of it, your users have a right to be PO'd.

The optgroup labels do not work with spaces.
I've solved this problem with the fix below:
- use the label only to display and reduce the label to an id without spaces for all other statements
... maybe this could be improbed to remove all special characters that are not allowed as css-class-name

===================================================================
--- ui.selectmenu.js 2009-12-15 16:35:05 UTC (rev 5596)
+++ ui.selectmenu.js 2009-12-15 17:17:52 UTC (rev 5597)
@@ -122,7 +122,8 @@
text: self._formatText(jQuery(this).text()),
selected: $(this).attr('selected'),
classes: $(this).attr('class'),
- parentOptGroup: $(this).parent('optgroup').attr('label')
+ parentOptGroup: $(this).parent('optgroup').attr('label').replace(/\s/g, ""),
+ parentOptGroupLabel: $(this).parent('optgroup').attr('label')
});
});

@@ -165,7 +166,7 @@
this.list.find('li.' + optGroupName + ':last ul').append(thisLi);
}
else{
- $('<li class="'+self.widgetBaseClass+'-group '+optGroupName+'"><span class="'+self.widgetBaseClass+'-group-label">'+selectOptionData[i].parentOptGroup+'</span><ul></ul></li>')
+ $('<li class="'+self.widgetBaseClass+'-group
+'+optGroupName+'"><span
+class="'+self.widgetBaseClass+'-group-label">'+selectOptionData[i].pare
+ntOptGroupLabel+'</span><ul></ul></li>')
.appendTo(this.list)
.find('ul')
.append(thisLi);

Is there a possibility to select an entry in the selectmenu by the option-value (<option value="123">label</option>) of the original select element and not by the index?
$('#mycombo').selectmenu('value', elemlIndex);
It would be nice to have such a method!

I feel that the format function should be passed the option element in addition to (or perhaps even in place of) the text. Let me explain a use case for this: I am creating a select menu to select the brand of a product. For each brand I also want to show the logo in the select menu. The non-javascript markup looks like this:

<select>
<option style="background: url(/contentstore/123d1231.jpeg) no-repeat left" value="1">Adidas</option>
<option style="background: url(/contentstore/2341a112.jpeg) no-repeat left" value="1">Nike</option>
</select>

Firefox the logo will show the logo correctly in the select menu. Other browsers ignore the style on the <option> element. When using selectmenu on this markup I want to extract the background image URL in my format function and use that to create a <img> element. This is only possible if the format method gets the <option> element as parameter as well.

The current implementation does not match the spec form this page: the value property in ui hash passed to events does not specify the value of the selected option, but the index of the selected option.

I am not sure if there is a need for a new ui hash data type; perhaps it would be simpler to just include the original <option> element? That already has the value and any other data that you might want.

The plugin does not behave correctly in environments where Array.prototype is augmented. There's a patch here: http://dev.jqueryui.com/ticket/5034

If you click on the menu to open it it is immediately closes again. This is different from a standard <select> which stays open until it looses focus. The only way to keep it open appears to be hold down your mousebutton and move the mouse down until you hover over an item, then move the mouse outside of the menu and release the button.

The behaviour for a large list of options is suboptimal at the moment. The entire list can be (much) larger than the current page height, in which case the page is stretched to make room for the entire list, which adds a lot of empty space to the page. Selecting items at the end of the list is very awkward since there is no scroll option, and the menu often closes before you found the item you are looking for.

I found it useful in event handlers to know the index if the selected option and the option element itself. I did this using a simple change:

@@ -339,8 +339,11 @@ $.widget("ui.selectmenu", {
this._prevChar[0] = C;
},
_uiHash: function(){
+ var index = this.value();
return {
- value: this.value()
+ index: index,
+ option: $("option", this.element).get(index),
+ value: this.element[0].value
};
},
open: function(event){

I like this project a lot. Something that would really help me is a little better control over the contents of the ui-selectmenu-status element. Specifically, I want the ui-selectmenu-status to show an icon without text (full text of all options available when the menu is opened). If the text content were in a separate SPAN (like the icon in ui-selectmenu-item-icon), then I could simply turn it off in CSS.

As it stands now, I have to use jQuery to target the text node and remove it.

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

The select menu doesn't work properly with jQuery UI 1.8. You can test it, the default "popup" style menu's width is not right , and almost all menus are closing immediately when you click on the select menu name.

I made a two minor changes to the plugin so that it

* it now works with jquery.ui 1.8
* it works with group names that contain whitespace

How can I submit my changes?

A direction parameter would be nice to force the menu to always drop down if you have say a menu that is close to the top of the window or bottom for example.

Would be pretty cool if this plugins could use an unordered list as a start.

I am using ui.selectmenu inside colorbox.
It works fine with below two combinations:
jQuery 1.3.2 and colorbox 1.3.8
jQuery 1.4.2 and colorbox 1.3.0

It does't work with the versions: jQuery 1.4.2 and colorbox 1.3.8

The problem is destroy method of ui.selectmenu call immediately after init method undesirably. So ui effect seen for moment.

I fix this by adding custom destroy method and call it when required.

// ui.selectmenu.js

..........
destroy: function() {
return;
},
// added function for custom destroy method
mydestroy: function() {
this.element.removeData(this.widgetName)
.removeClass(this.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled')
.removeAttr('aria-disabled');

//unbind click on label, reset its for attr
$('label[for='+this.newelement.attr('id')+']')
.attr('for',this.element.attr('id'))
.unbind('click');
this.newelement.remove();
this.list.remove();
this.element.show();
},
.........

The problem occured only on when colorbox resize method called. Otherwise it is fine with ui.selectmenu.

Hello,
jQuery ui selectmenu is not working properly with ui dialog.
What can i do to retrieve a newer version of jQuery ui selectmenu.
Thanks :)

Hi all,
I would love to see this menu taking advantage of optgroups a little more to organise large menus and make them more usable. For instance, optgroups could act as parents for fly-out or even accordion style hierarchies, making large menus much easier to use. A good example of this would be a typically large Country menu which could be grouped by Continent. I guess we may be able to achieve a certain amount with CSS for flyouts but perhaps ui.accordion could be used for the other option?

Thanks
PS. loving this widget :)

Finlay there are some good news ;-)

I opened a repo at GitHub to push further development of this plugin. So far the following bugfixes are included:

- working with jQuery 1.4.x and jQuery UI 1.8.x
- problems with positioning
- problems with whitespaces in optgroup


Please add bugs and feature requests to the GitHub issues Tracker: http://github.com/fnagel/jquery-ui/issues

This meets 95% of my needs in it's current form, great work!

The main problem I have is that I need to display images that I cannot specify in advance in my CSS file. For instance, I need to show a drop down list of people, with their profile photo next to their name. Currently, I'm displaying their Gravatar (http://gravatar.com), so I need to display an image like the following:

<img src=";http://www.gravatar.com/avatar/ba0c49b9807f496ba4d567700b0cf2fe?d=monsterid&r=g&s=25">

Is this possible in the current version? If so how? If not, it would be a valuable feature.