This is an unobtrusive jQuery plugin that allows you to replace the HTML select box with a styled dropdown menu.
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.
You can view a working example here
NB: A new version can be located here
30 Responses
Brandon Aaron
23|Jul|2007 1Nice 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/
brainfault
23|Jul|2007 2Oh!! didn’t notice it, a couple of hours wasted for nothing then ! feel so stupid thank you for the link
Hatem
23|Jul|2007 3No 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 :)
Gafitescu Daniel
01|Aug|2007 4Still 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.
brainfault
01|Aug|2007 5you 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 ;)
des
20|Sep|2007 6This 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.
David
19|Nov|2007 7Looking 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.
pawel maziarz
19|Nov|2007 8hi,
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
pawel maziarz
19|Nov|2007 9p.s. the changes I’ve made, are here: http://labs.intersim.pl/drg/devel/js/jSelect/
Zeno
29|Nov|2007 10Nice plugin : )
Lee
29|Nov|2007 11If 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.
Doug
30|Nov|2007 12Hey thanx fo this, have been looking for a quick and easy method for my drop downs.
Patifier
30|Nov|2007 13To 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);
});
Patifier
01|Dec|2007 14Workaround for IE6/7:
if ($change)
{
var attr = $change;
typeof attr == ‘function’ ? attr() : eval(attr);
}
That was hard to find a solution. Damn IE! :)
Patifier
01|Dec|2007 15Workaround for IE6/7:
if ($change)
{
var attr = $change;
typeof attr == ‘function’ ? attr() : eval(attr);
}
brainfault
10|Dec|2007 16I’m sorry for this delay, I’ve been very very busy last days.
brainfault
10|Dec|2007 17@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)
Micheal
13|Dec|2007 18Is 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
Mac
07|Mar|2008 19Waouu This is fantastic I love it :)
Ram
24|Apr|2008 20Disable 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
Ram
24|Apr|2008 21How to access the object when it has created by new jQuery.SelectBox ?
Colm
07|May|2008 22Hi,
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.
brainfault
07|May|2008 23to 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
Colm
07|May|2008 24Thanks 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.
Colm
08|May|2008 25Ok 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.
brainfault
08|May|2008 26There’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/
Hunka
12|May|2008 27Its really a nice plugin, thanks :)
Daci
23|May|2008 28Can you fix this to work wiht optgroup too?
…
immo
26|Jun|2008 29How can i add an onlick event such as
I tried it like this example but it dosen’t work.
Can you help me. Thx
Tim W
29|Jun|2008 30newbie 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.
Leave a reply
Search
Tag Cloud
django gedit javascript jquery linux mysql oracle php pin propel python selectbox symfony textmateCategories
Blogroll
A design creation of Design Disease
Copyright © 2007 - Brainfault - is proudly powered by WordPress
InSense 1.0 Theme by Design Disease brought to you by HostGator Web Hosting.