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
+1 to this freezing in ie7. has anyone figured out a solution?
well, I’ve just noticed it, IE freeze when you click on one select, the window has to loose focus and than the drop down will appear, I will try to fix it ASAP.
I think I’ve found the problem. Please try to remove or comment the line 84 ($container.focus();) if this fix the problem please let me know so I can release it.
That fixed it, works perfectly now!
Thank you for developing this amazing plugin.
I currently have two issues:
When using version 1.0 of the script the page hangs for about 20 seconds until the dropdown appears (IE7).
So I am currently using version 0.6beta1 with the following problem:
I am having several dropdowns on a page and I use a class selector to add the selectbox. This works quite fine but the selected class is lost for all other dropdowns when I select one of them.
I would like to avoid using ID-selectors because the site is developed on ASP.Net and the id is used internaly by .Net.
Any suggestions?
Best regards
/René
Just realized that the freeze problem has been discussed earlier. I have now uncommented line 84 and it is working just fine.
The selected class problem is solved in 1.0.
Thanks for a great plugin
So the provided examples are not working on XP IE8 – Do I have to change something in the code to make it work?
As with comment 21 & 60 the optgroup tags cannot be used on conjunction with this plugin, I am trying to figure a workaround but not getting very far at all. Here is an optgroup select for anyone who doesn’t know what optgroup is.
Charlie
opt0.1
opt0.2
opt0.3
opt1.1
opt1.2
opt1.3
opt2.1
opt2.2
opt3.1
opt3.2
opt3.3
opt3.4
//
//
//opt0.1//
//opt0.2//
//opt0.3//
//
//
damn html blocker!
here: http://www.w3schools.com/tags/tag_optgroup.asp or click my name
We were having problems in IE8. When the select list was open, when ever you clicked on the scroll bar, the whole list would disappear prevent you from scrolling down.
We are using v10. We fixed this issue by changing the if statement around line 112 to:
if(jQuery.browser.msie || jQuery.browser.safari){
if(document.activeElement.getAttribute(‘id’) && document.activeElement.getAttribute(‘id’).indexOf(‘_container’)==-1){
hideMe();
} else {
$input.focus();
}
} else {
hideMe();
}
First we removed the check for IE8 so IE8 is included in the checking of the container. Then we added a check to see if getAttribute(‘id’) exists so there are no null errors returned.
Hope this helps, and please give feedback if there is a better way.
—
Matthew & Mike
http://www.mrconnerton.com/
http://www.mikehoffman.org/
Thanks for the plugin. I removed line 84 ($container.focus();) and that fixed my issue with IE. It was a case of chicken/egg. You focus on the container, which in turn looses focus on input (aka blur) which hides the container. Could this have been fixed by using your hasFocus and isFocus variables?
@Charlie :
Take a look at my mods on my site (click on my name) for optgroup.
Page where it’s used : /conseil.htm
Source : /jquery/jquery.selectbox-1.0-gv.js
Css : /styles.css
@blub :
Maybe you should change (jQuery.browser.msie && jQuery.browser.version.substr(0,1) < 8) to <=8 if you want to resolv the scrolling problem in IE8.
Guillaume
Hi,
I added some code to make the scroll function working better,
this also checks chrome and also closes in case of errer
it’s a little tricky but it works for me
.blur(function() {
if ($container.is(‘:visible’) && hasfocus > 0 ) {
if(opt.debug) console.log(‘container visible and has focus’)
} else {
// Workaround for ie scroll – thanks to Bernd Matzner
var is_chrome = navigator.userAgent.toLowerCase();
if(jQuery.browser.msie || jQuery.browser.safari || is_chrome.indexOf(‘chrome’) > -1){ // check for safari too – workaround for webkit
try{
if(document.activeElement.getAttribute(‘id’).indexOf(‘_container’)==-1){
hideMe();
} else {
$input.focus();
}
}
catch(e)
{
hideMe();
}
} else {
hideMe();
}
}
});
The plugin frooze on IE8, but the removal of the focus on line 84 / v1.0 worked a treat :)
åšä¸»å†™çš„很精彩，路过在这里冒个泡，åšä¸»æœ‰ç©ºçœ‹çœ‹æˆ‘çš„å°ç«™ï¼ˆwww.rentiyishu01.cn）
Is there away to reset the selectbox? Tried this which I read here and doesn’t work, any suggestions?
$(‘#page’ + id + ‘_input’).remove();
$(‘#page’ + id + ‘_container’).remove();
$(‘#page’ + id).selectbox();
Why we need here $container.focus();, because in firefox, the focus goes to the container, and when you click outside the input, the container is not closed, and when you press second time on the input, than it’s close proper.
.focus(function(){
if ($container.not(‘:visible’)) {
inFocus = true;
$container.show();
$container.focus(); // I commented this line to get the proper result
}
})
Check it please, I think it’s quite a important thing.
Does anyone know how to fix dropdown list showing behind another selectbox in IE6 when there are more selectboxes on one page? I think this is similar problem as #51 and #58 asked about but never they never got any reply or solution.
Hi, thanks for this plugin, it’s really great and easy to use, but I had problem with IE6 and IE7 crashing (version 1.0). I tried to fix it, here’s what I changed:
.focus(function(){
if (!inFocus && $container.not(‘:visible’)) {
inFocus = true;
$container.show();
$container.focus();
}
})
….
function hideMe() {
inFocus = false;
hasfocus = 0;
$container.hide();
}
all the best
harvejs
Самому начали приходить 3-4 ÑÐ¿Ð°Ð¼Ð¾ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ñ Ð¿Ð¾Ñле 15-16 июлÑ, причем точь-в-точь, как у автора.
Im sorry but the version 1 don’t work at all on IE all version, it’s normal ?
Version 1.0 makes IE6 crash for me. Anyone have any suggestions?
-Jon-
i like this very much.thank you.
there are some suggestions:
1. version 1.6 work not well in chrome.the select div cannot hide when click other place in the page but not div of select. the version of 1.4 and 1.5 works well.
2. the img of select_input’s background can be overed by the text when the input’s text is too long, is there some good idears?:)
I am poor in english,sorry.
:)
Hi,
Its an amazing plugin and after i used i discovered an issue and not sure everyone noticed … My IE browser hangs and no respond … first i though the issue with my implementation and later when i tried the demo page http://www.brainfault.com/demo/jquery.selectbox-1.0/selectbox.html same issue. could someone please help me … unfortunately i could not share my application but you can re-product the issue in demo page .
My Browser and OS details as below:
IE 6: Version 6.0.2900.5512
Windows XP Service Pack 3.
How can i do it to set seleted option when page is postback?
I fixed it :P. But now i need help for changing background-image when mouse hover.
It is not support the multiple select.:(
Hi there, great plugin!
Just one thing I’ve noticed today. If I have a hidden form and fadeIn() it, the $input.position top&left is always 0.
Any workarounds?
I fixed the problem by making height , position , postop , posleft global variables and calling them on click.
Although there is a little jump from the previous position…
nice. big thx
It would be nice if the plugin was wrapped in a:
(function($) {
})(jQuery);
so that it won’t conflict with Prototype.
Sadri, the links to the plugin appear to be broken.
‘File not found’!
The links to the plugin appear to be broken.
‘File not found’!
Fixed, thank you forgot to move some files when moving to a new server.
Hi,
thx for this cool plugin. Unfortunately there is a imperfection in the layout.
Imagine you are using a selectbox in a small column with not much space
> 150px width. Now it happens that I have entries which are a little bit
longer than the width of the replaced selectbox.
Watching the graphical selectbox in FF the text lays over the arrow.
In IE the arrow has disappeared completely. Would you be so kind and
fix this problem?
thx indeed
you have to resize the image and/or tweak css.
Wouldn’t it be a better solution to add another DIV
as text wrapper to prevent this behaving? This one
we could give a fix width and an overflow hidden.
Why won’t my container list the items? I’ve put it togethere properly like this:
value1
value2
value3
But this results in a input-box with my background and a empty container.
Damn, HTML got blocked. It is:
{select id=”select-box” name=”select-box”}
{option value=”value1″>value1{/option}
{option value=”value2″>value2{/option}
{option value=”value3″ selected=”selected”>value3{/option}
{/select}
Im new at this and can’t seem to figure this out on my own. I have a asp.net dropdownlist which i want to replace the images of. I however have autopostback on because i need to fill the next dropdowns.
How do i solve the conflicts between the autopostback and the script?
Very nice plugin.
It does work ok in IE6.
Question though: Would the menu display on top a DIV that appears on top of it?
I know the workaround this problem is to use an iframe, but if using this script solves that issue as well, then this is the holy grail of styling menus without having to worry about them appearing on top of other elements.
Thanks.
This thing removed my HTML, lol. Here is the post again.
—–
Very nice plugin.
It does work ok in IE6.
Question though: Would the [select] menu display on top a DIV that appears on top of it?
I know the workaround this problem is to use an iframe, but if using this script solves that issue as well, then this is the holy grail of styling [select] menus without having to worry about them appearing on top of other elements.
Thanks.
Hi. Great plugin!
I’m using version 1.2, and it’s working great except in IE 8. In IE 8 when the user clicks on the scroll bar it closes the drop down. I was wondering if you knew a way to fix it or a hack to get around it?
Thanks so much!