jQuery selectbox replacement
Overview
The jQuery select box replacement let you replace the html select tag with a stylish one in an unobtrusive way, technically it hides the real select box and create an html list, when you choose an option it reflects this change in the real select tag.
Compatibility: Firefox 3.5, IE 8, Chrome 4. IE 6 ignored for now might or might not work
Usage
$(document).ready(function() {
$('#myselectbox').selectbox();
});
Options
$(document).ready(function() {
$('#myselectbox').selectbox(
{
onChangeCallback: myfunction,
inputClass: 'selectbox', //css class for the input which will replace the select tag, display the background image
containerClass: 'selectbox-wrapper', // The list container class (a div element)
hoverClass: 'current', // css class for the current element
currentClass: 'selected', // css class for the selected element
debug: false // debug mode on/off
}
);
});
Example
Download
Previous versions:
Version 1.1
Version 1.0
Version 0.6 beta1
Version 0.5
Version 0.4
Changelog
- Version 1.2 (Thanks for Guillaume Vergnolle)
- Add optgroup support
- Possibility to choose between span or input as replacement of the select box
- Support for jquery change event
- Add a max height option for drop down list
- Version 1.1
- Fix IE bug
- Version 1.0
- Support jQuery noConflict option
- Add callback for onChange event, thanks to Jason
- Fix IE 8 support
- Fix auto width support
- Fix focus on firefox dont show the carret
- Version 0.6 beta 1
- Fix IE scroll bug
- Fix the submit bug in Mac Firefox
- Version 0.5
- Separate hover and selected class
- Version 0.4
- Fix width when the select element is in a hidden div
- Add a unique id for the generated li to avoid conflict with other selects and empty select values
Hi popper, have you got any fix for resetting the select box? I am also facing the same issue, I am doing a selectedIndex = 0 through my JavaScript but index is not changing :(
Guys, any help would be appreciated.
-Sunil.
On Safari 4 and Chrome/Mac, the select menu expands but will not close.
Florian,
I just changed the style of the existing option item and it widens both:
style=”width:50px;”
I had an interesting “bug” (not in the selectbox code) that when I clicked on an item in the select drop down, it would not make the drop down disappear. When I debugged it, I saw that it was disappearing but then immediately reappearing. I FINALLY tracked it down to the HTML code (since this was not occurring with the other three select boxes on the page). The was surrounded by an empty tag (i.e. no parameters. So it looked like this:
Stuff
Not correct HTML. I am posting this in case someone else has a similar problem.
document.activeElement.getAttribute(‘id’) returns null in Chrome!, which causes exception in line 123.
Please, make it so I can change select box content dynamically. I already rewrite it, so no it handle such requirenments, but it’s not so pretty and I wish it was in standart edition.
And thanks for ability to bind custom events on selects. Now your version is almost as functional as my durty version =)
And IE6 shouldn’t be ignored. At least for now. (I hate it very much, but it have very big share, so company want it to be supported =(
When you have very long list of items and scroll appears one click on it – it shuts down.
On line :203 active become (list.length+1) when you click down arrow and come to last element.
which cases exception
Open select box, start pressing down arrow and than press Enter to choose one. Than continue pressing down arrow.
scroll(list, active) is still calling.
@Aleksandr
Thanks for the feedback hope that I’ll find the time to fix this.
Hey Sadri,
When I used your selectbox replacement on inline s, the wrapper divs were positioned incorrectly, staying on the left. I made a hackish fix by appending $input first, then setting its left offset as $container’s left position. I’ve tested my changes in IE7/XP, FF3.5/Linux and Chrome5/Linux so I think it should work fine.
Thanks for writing such a useful jQuery plugin!
Hey,
I’d like to report a small bug with the plugin.
If the is floated (left or right), the drpodown box placement breaks.
Thanks,
Gregory
In the demo, the scrollbar (Field 3) is broken in IE8, when you click it the list disappears
Hi,
Thanks for this great plugin, but how can we use it with the validator plugin ? i’ve tried a lot of different things, and i can’t make it work . Thanks a lot
Stephane
on Chrome (Win/Mac) the blur event isn’t triggering therefore the dropdown box stays visible on click outside the dropdown/input
very good ??? O(?_?)O??
Hello, i’ve had an issue while using enter key (13) to select an option. (Firefox 3.6 @ Win XP, didn’t test any other)
When enter was pressed to select an option, the selectbox _input field would get focus and if clicked again, would not open the _container.
Fixed it by adding this line at “li” click event handlers:
$('#' + $select.attr('id') + '_input').blur();Loving your select box replacement :-) The only thing is that there seems to be a bug with it in IE7 that I can’t suss out. Basically, when dragging the scroll bar to try and scroll down to the bottom, the layer treats it as a blur event and closes the select box.
Are you already aware of this? Is there anything I can do to sort this out (I’m using 1.2)?
Thanks for all your efforts.
.s
This is a great solution,
I only have one question
How to handle this?
jQuery('#dropdownId').val('4');The selectedvalue from the custom dropdownlist won’t change. is there a way to do this?
Hi!
There is issue in 219 line (while using groups);
Is:
$select.get(0).selectedIndex = $('li', $container).index(li);Should be:
$select.get(0).selectedIndex = $('li:not(.groupname)', $container).index(li);However thanks for script ;)
Hi guys,
How do i use jquerys noconflict wit this?
Doesn’t work for inline selectboxes. Positioning of the selectbox list should be done dynamically with jQuery. That would solve positioning issues.
Can someone pls answer to :
How to handle this?
jQuery(‘#dropdownId’).val(‘4′);
Just solved the caret problem … use inputType : ’span’ instead of inputType : ‘input’ ….
is there a way to set the color for option text?
I’m trying to set different colors for each option in the selectbox.
is it possible?how can that be done?
please let me know.
Thanks.
Hi Brainfault,
I noticed in a previous release, other folks had mentioned that option values with an underscore (‘_’) in them do not work with this plugin. It still has not been fixed. Any ideas on how to fix this?
Thanks,
-Chris
Chris: I removed the elements which contains an underscore , and I just used only integer in the value.
for example:
$(‘#resultsperpagetop’).change(function(){
document.location =’product.php?product_id=${productId}&products_number=’+$(‘#resultsperpagetop’).val();
});
I think I have managed to fix the inline select issue by programmatically assigning the position of the wrapper.
I replaced the input focus function with this:
.focus(function(){
if ($container.not(':visible')) {
var dim=$input.position();
inFocus = true;
$container.show();
$container.css("position","absolute");
$container.css("left",dim.left);
$container.css("top",dim.top + $input.height());
$container.css("z-index",99999);
}
})
I have only been able to test in IE7, so I will need corroboration for this, but it seems to work for me.
I have fixed the Problem in Webkit! I have add after .focus(..) this…
.focusout(function() {
if (!inFocus) {
$container.toggle();
}
})
Very Nice Script!
Dawm,
when i used my Fix cant select value :( i. have a better idea…
$container.mouseout(function(){
$container.hide();
}).mouseover(function(){
$container.show();
})
When Mousout from Container hide the $container
Hi there,
thank yu for this great problem.
But I’m also suffering of the Chrome-Issue: As I hit the scrollbar, the whole box disappears. If I’m right here this is because of Chrome doesn’t understand the »document.activeElement«.
I tried a couple of workarounds myself – but neither of them got it working. I didn’t find a solution on this site either – or didn’t I look right?
Anyone some idea for this topic. Or is there even an upgrade fixing this problem?
Thanks in advance,
Burt
Sorry, me again. It’s already a little late. I didn’t wanted to thank you for the problem but for the great plugin ;-)
Burt
Nice scripting, love it!
Discovered one downside: its impossible for me to choose for a selected option when using inputType set on span..
My dropdown was disappearing in IE8 when the scrollbar was clicked. This function worked for me. Hope it helps someone. Add it right after the close of the .focus function definition:
$('YourSelectorHere').live('change focusout',function(){
if (!inFocus) {
$container.toggle();
}
})
Thanks for this gr8 Plugin
but When we click on the selected item (which is already selected) it calls the change() function again.
Otherwise in jquery it happens only when the drop-downs value is actually changed
Please let us know how can we get rid of this issue.
Thanks in advance
Dave
Chris: I had the sam problem with underscores. Fixed it by replacing
var el = ar[ar.length-1];by
var el = (''+li.id).replace(elm_id+'_input_', '');Hi,
I have more then one select menu on one page (12). When I’ve used your plug-in only on first select happens graphic replacement. Is there a solution for that already? Thx for the answer.
bye
Hey Sadri,
Thanks for this awesome select box replacement script, works a treat.
Fixed up the issue with Chrome, Safari & Opera with the on blur not closing the drop down.
This also fixes up the problem with the on blur firing when the scrollbar is clicked in the drop down.
I added the following code below the $input events
var mouseFocus = false;
$container.mouseover(function() {
mouseFocus = true;
})
.mouseout(function() {
mouseFocus = false;
});
Then i REPLACED the following code:
// Workaround for ie scroll - thanks to Bernd Matzner
if((jQuery.browser.msie && jQuery.browser.version.substr(0,1) < 8) || jQuery.browser.safari){ // check for safari too - workaround for webkit
if(document.activeElement.getAttribute('id').indexOf('_container')==-1){
hideMe();
} else {
$input.focus();
}
With:
// Workaround for ie scroll - thanks to Bernd Matzner
if((jQuery.browser.msie && jQuery.browser.version.substr(0,1) < 8) ){ // check for safari too - workaround for webkit
if(document.activeElement.getAttribute('id').indexOf('_container')==-1){
hideMe();
} else {
$input.focus();
}
} else if (jQuery.browser.webkit || jQuery.browser.opera){
if (mouseFocus) {
$input.focus();
} else {
hideMe();
}
Hope this helps anyone struggling with the issue.
Cheers,
X
The Safari bug where the dropdown menu doesn’t dismiss on blur can be avoided by giving the tag an id. Somehow the id value ends up in document.activeElement, so the condition is met to hide it without having to update jquery-selectbox-1.2.js.
The word “body” was left out of the previous post because it was in tag form! It should say:
The Safari bug where the dropdown menu doesn’t dismiss on blur can be avoided by giving the BODY tag an id. Somehow the id value ends up in document.activeElement, so the condition is met to hide it without having to update jquery-selectbox-1.2.js.
Hi,
I m getting problem when I use this file (query-selectbox-1.2.js.) two times in html , i.e. include this file two times , it creates double select box in all browsers, please tell me any solution. [but i need this file two times bcz i have call different pages]
thanks in advance.
Breaks jQuery on line 116 for me. Only IE7 issue on load – jquery is broken and redirect for dropdown doesn’t work.
if ( set ) {
style[ name ] = value;
}
That’s where it breaks.
I had the same problem as Brian… the blur event triggers when the scrollbar in the container is clicked. My solution is much shorter though:
Don’t set hasfocus on mouseover/-out of the li elements, but instead on the container (because the scrollbar belongs to the container, not the list items), i.e. remove the lines “hasfocus = …;” from the sourcecode and add this line:
$container.mouseover(function() { hasfocus = 1 }).mouseout(function() { hasfocus = -1 })
[url=http://auslander.ru]????????? ??????????? ?? 3 ???[/url]? – ?????? ?? ??????! ?????? ????? ????? ?? ????????? :) ???????, ???? ??? ?????????? ???????? ?????? “??????????? ????????????? ? ??????” – ??, ?? ?????? ?????? ??????????? ?? ?? ??? ???????? ???????. ? ???? ??? ?????????? ???????????? ???????? – ?? ?? ????? ???????? ??? ????? ?????? [url=http://auslander.ru]???[/url] ?????????? ;) ??????????…
Hi Sadri,
The dropdown list disappears when users click on the scroll bar in IE8. Could you take a look at this issue?
Thank you,
Ian
Hello, I’m having exactly the same problem as number 47 above… dropdown list disappears when users click on the scroll bar in IE8 – would welcome your advice and/or fix!
thank you,
Kim
Can anyone tell me how I change the selected option – I want to select a specific value when a link is clicked – finding the id and setting the value in the same way I’ve done for regular drop-downs doesn’t work for me.