Select Box replacement
July 23rd, 2007 by
Sadri Sahraoui | 
This is an unobtrusive jQuery plugin that allows you to replace the HTML select box with a styled dropdown menu.
Why ?
As most of us, I hate IE6 but I have to deal with it. At work, our users use exclusively IE6 so you can imagine the nightmare! I came across the IE bug where the select box stay always on top of any div even if you define a z-index value, more on the subject can be found here and here. So this plugin try to resolve the problem by replacing the select box by dropdown menu.
Know issues
- On Mac with both Safari and FF when you select a value using Enter key the form is submitted, it seems that “preventDefault” is not working. If anyone has an idea about how to resolve this, just drop me a mail or a leave a comment.
- When an option is selected using the mouse and when you reopen the list the selected option is not highlighted anymore.
Example
You can view a working example here
Download
NB: A new version can be located here
Nice work. Just wanted to let you know that there is a plugin called bgiframe that applies the iframe hack to get around the z-index issues with select elements in IE. http://jquery.com/plugins/project/bgiframe/
Oh!! didn’t notice it, a couple of hours wasted for nothing then ! feel so stupid thank you for the link
No time wasted Sadri, you don’t have control on the usual select, but with this plugin you can for example open it on focus :)
it was one of the reasons to implement this, but you seems to forget :)
Still there is a problem.
If I have 2 selectboxes and when I change something in first select it doesn’t trigger the onchange event for that specific select.
you mean that you have attached an onChange to html select element ? if it’s the case then we have a problem !
the onchange event will no more fire, I think that I have to create a workaround to make it work.
expect a new version soon ;)
This is exactly what I’ve been looking for. I’ve been searching for over an hour now for a decent replacement to the select tag. Everything I’ve found is more of a menu, I can’t decide if they just don’t exist or my searching skills are rather poor today.
Looking to style a select tag using jquery, so thanks for the post. However your intention for replacing the select element to prevent bleedthrough in IE6 is also (and more commonly/easily) accomplished by placing a transparent iframe between the popover content and the form underneath it. This also works for bleeding checkboxes and radio buttons.
There is a jquery plugin called bgiframe that will help with this. Standard plugins such as Thickbox use it.
hi,
great plugin, thanks for your work. but I need to make a few changes in jSelect.js. so I made a quick work around for console.log for, I made also a quick solutions for options with the sames values (each select should have different id). at the and I deleted function .focus and replaced $input.width() with $input.css(‘width’) to deal with hidden divs (for jqModal).
cheers,
drg
p.s. the changes I’ve made, are here: http://labs.intersim.pl/drg/devel/js/jSelect/
Nice plugin : )
If I am being thick I am sorry.
But the ID will only work for one select.
so how can I make it work for multiple selects on one page ?
Hope you can advise.
cool code though.
Hey thanx fo this, have been looking for a quick and easy method for my drop downs.
To apply an onchange event:
Under: “// hide select and append newly created elements
$select.hide().before($input).before($container);”
Add:
// apply onchange if available
if ($select.attr(‘onchange’))
var $change = $select.attr(‘onchange’);
And add the last two lines on this function:
.click(function(event) {
if (opt.debug) console.log(‘click on :’+this.id);
$(this).addClass(opt.hoverClass);
setCurrent();
hideMe();
if ($change)
eval($change);
});
Workaround for IE6/7:
if ($change)
{
var attr = $change;
typeof attr == ‘function’ ? attr() : eval(attr);
}
That was hard to find a solution. Damn IE! :)
Workaround for IE6/7:
if ($change)
{
var attr = $change;
typeof attr == ‘function’ ? attr() : eval(attr);
}
I’m sorry for this delay, I’ve been very very busy last days.
@Lee : you can do it using this : $(’select’).selectbox();
it will apply to all select boxes present in your page
@Patifier : sorry but the workaround doesn’t seem to work
in IE6 (using wine linux)
Is it possible to use that selectbox inputs non selectable ? I tried to use it http://www.freearticlesarchive.com/category/Web/118/ but it did not work.
thanks
Waouu This is fantastic I love it :)
Disable dropdown is working in IE but not in Fire Fox.
I am doing it this way :
elem = document.getElementById(\”".$name.”_container\”)
elem.disabled=true;
we can disable a div container in IE but not in Fire Fox.
Is their a solution for this problem? If their, please let me know
Thanks
How to access the object when it has created by new jQuery.SelectBox ?
Hi,
Great work. I’m using it now. My question is how would I use the example for two or more select box’s on the same page, but apply a different width to the select box’s?
I have 0 js skill so I have only tried stuff out on the CSS file.
to apply the plugin to more than one select box you just have to assign a shared class to the select boxes and then apply $(‘myclass’).selectbox(), the width of the replaced select is taken from the original
say your select has 100px as width then the generated will have a 100px witdth
Thanks for the quick response. Sorry I didn’t word my question very well. I’ll try again.
I have for example 2 select box’s that I want to replace using your genius plug in. However I would like to make select box A: 50px in width and,
select box B 100px in width.
How I would achieve this was my question.
Ok I got it. Sorry found the solution on the other blog through the “NB: A new version can be located here” link above in a post by Taha Paksu. Then all you have to do is add the style line in the select tag something like . Hope that will help someone else. Thanks a million for the work everyone.
There’s a dedicated page for the plugin now and it’s there where you’ll find any update
http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/
Its really a nice plugin, thanks :)
Can you fix this to work wiht optgroup too?
…
How can i add an onlick event such as
I tried it like this example but it dosen’t work.
Can you help me. Thx
newbie question:
How do I change the value displayed in the select box with javascript, after the select box has already been created? I’ve tried:
document.getElementById(‘my_select’).selectedValue = x;
which doesn’t give me an error but neither does it change the value of the select. I assume I need to call some method on the select box itself to get it to update? Any clues? Thanks for reading.
Excellent
Great, this is going to save me some time, I think! Thanks!
hmm… looks like it turns ampersands into & for the selected item. That sucks, editorial will never have it.
You’ve lost a css file in Your archive!=)
great work, just what I needed.
I only did some changes so it shows text inside the textbox and not html like “ test ”
function setCurrent() {
var li = $(“li.”+opt.hoverClass, $container).get(0);
var ar = (”+li.id).split(‘_’);
var el = ar[ar.length-1];
$select.val(el);
$input.val($(li).text());//instead of $input.val($(li).html());
//which seemed to had problems with whitespaces
return true;
}
If replace
$select.children(‘option’).each(function() {
on
$select.find(‘option’).each(function() {
then partially work with optgroup
Quick update for onchange compatibility
function setCurrent() {
var li = $(“li.”+opt.currentClass, $container).get(0);
var ar = (”+li.id).split(‘_’);
var el = ar[ar.length-1];
$select.val(el);
$input.val($(li).html());
//chemix
$select.change();
return true;
}
Man thanx for this, have been looking for a quick and easy method for my drop downs.
IE7 & IE8, the scroll bar does not work, this reproducible even on this sites demo page just by adding more options to the select
Hi! Just a tip! I think you forget to put the css file in the download zip! I resolved getting the css file of the example. But I think you should put it in the zip too.
this is doing the onChange trick for me, let me know if there is a better way to do it.
xs
function setCurrent() {
var li = $(“li.”+opt.hoverClass, $container).get(0);
var ar = (”+li.id).split(‘_’);
var el = ar[ar.length-1];
$select.val(el);
if ($input.val() != $(li).html())
$(“#”+$input.attr(“id”)).trigger(“change”);
$input.val($(li).html());
return true;
}
This is great!
Just thought I’d mention the known issue isn’t an issue on my safari 4.0.2 (on mac).
I had an issue where dropdownlists (ASP.Net) using selectbox where not firing onchange when AutoPostBack was set to true.
The try/catch is ugly which I am aware of but IE failed trying to validate attached validators which where not there.
The solution was changing the following code:
.click(function(event) {
var fl = $(‘li.’ + opt.hoverClass, $container).get(0);
if (opt.debug) console.log(‘click on :’ + this.id);
$(‘li.’ + opt.currentClass, $container).removeClass(opt.currentClass);
$(this).addClass(opt.currentClass);
setCurrent();
$select.get(0).blur();
hideMe();
try{
$select.change();
}
catch(err){}
event.preventDefault() does not work for Enter in Firefox as mentioned under “Known issues”.
I solved the problem by adding the following code below the .keydown event handler:
.keypress(function(event) {
if(event.keyCode == 13) {
event.stopPropagation();
$(‘li.’ + opt.hoverClass).trigger(‘click’);
}
})