New release of jQuery selectbox replacement
February 10th, 2008 by
Sadri Sahraoui | 
I’ve just released a new version of Selectbox replacement plugin which fix the highlight issue and added escape keyboard binding. A new css class has been created for the selected element – previously I was using the hoverClass – so now we have 2 options hoverClass and selectedClass.
Example
You can view a working example here
I found this page after looking for an alternative to this selectbox replacement:
http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/
I think the one at wsisiz is a bit more robust, and anyone having trouble with this version might compare it to that one.
http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/
these version has no support for keyboard navigation
hey there. great plugin and well written. was wondering though, is there a way to have a function that sets a default value for the select?
This is so nice and practical. But it seems that does not work with two or several select boxes in one form.
Is there any way?
Slightly embarrassed and with a quick smile ro the bus driver, she reached behind her to unzip her skirt a little, thinkibg that tgis would give her enough slack to raise her leg.
I was getting a error on line 104 (IE8), were the code from bernd was implemented and fixed it by changing the blur() method as;
.blur(function() {
if ($container.is(‘:visible’) && hasfocus > 0 ) {
if(opt.debug) console.log(‘container visible and has focus’)
} else {
hideMe();
}
});
Hi there,
Is there a way to re-active the selectbox plugin after an ajax call?
If I recall the function .selectbox() things doesn’t go very well…
Thanks in advance.
Gr Koen
Rolf, you are right
I also get in IE8 error – it happens when I click on selectbox and without exiting
the menu click on radio button/checkbox. Your modification works perfectly
Thanks,
best regards
How to change the selectbox “selected” in runtime?
ex:
[code]
1
10
100
1000
document.form1.combo.value="100";
[/code]
With this code not work! :(
Woah! Out of the numerous ways I found to create stylish selects, this is the _only_ one that really takes care also usability, working with tab key and arrows and such! Grrreat work!
Thanks a lot for this plug in. I’ve tried several and this one gives the best and easiest job.
I noticed that when you have multiple select items using the plug-in in the same page:
when you click one, select an item, click another one – the second select input’s previous selected item should be higlighted with the ‘currentClass’ — but it’s not.
I checked the code and it looks like only the last selected item, is the one with the currentClass — anyway around this? It’s logical that if you open a click to open a dropdown – it will show you which item is selected.
Thanks again.
Roy.
Ok… found the fix at this link:
http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/#comment-278
In case some else cant find it.
Great plug-in!
Roy.
good plugin…thanks
antibiotics and eye infection Order Neurontin buy disney tea time with me little belle consumer safety work in the areas of compliane with the fda marnaf syndrome
http://rxdrugs24×7.com/termsofuse.html
Just wanted to let you know that the plugin does not work correctly when the “value” of an option contains an underscore (_)….
First, great plugin, thanks for releasing it.
I needed to style some selects that are on a horizontal bar – u make your selections from 5 of them and then hit a search button. To get this to work the way I wanted I made some changes and they may help people so here they are:
Note: I removed the keyboard navigation as I needed to remove some of the blur events which were causing problems when you used the scrollbars in IE or Safari (hid the container). So my replacement for the blur looks for a click event. Not perfect for accessibility but works for my implementation.
First, I needed the drop down lists to have whatever width they need so i commented out the following in the intit function and set a min-width on the stylesheet for .selectbox-wrapper:
//var width = $input.css(‘width’);
//$container.width(width);
Then, because I have 5 of them side by side on a horizontal bar, i needed each one to drop down below it’s associated input that’s on the bar. Did that by adding this to the init function:
var pos = $input.position();
$container.css({left: pos.left, top: (pos.top+33)});
Now for the blur event replacement. Just below where init(); is called, there were 2 events for $input – .click and .blur. I replaced this whole block with the following:
$(‘body’).click(function() {
$(‘.selectbox-wrapper’).hide();
});
$input.click(function(event){
event.stopPropagation();
$(‘.selectbox-wrapper’).hide();
$container.show();
});
Credit goes to this post on stackoverflow.com for that solution: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element
So what’s happening is I’m checking for a click in the body of the document and if I find it, I’m not just calling hideMe(), I’m closing all the .selectbox-wrapper divs to mimic the behaviour of an actual select.
Then when the input gets clicked, it’s stopping the ‘body’ click event (which would close all containers), it’s hiding all other drop downs and showing the current one. Only thing this doesn’t allow for is hiding the drop down if u click on the input at the top while it’s open. But i’m working on that one!
I don’t promise that this is perfect code as I don’t write much jQuery but it sorted my problems and works in FF3.5, Safari 4, IE7 and IE8. Hope this will help some other people with similar problems.
Clarification.
Ok, this version should be an improvement and if you have the drop down showing and click the top input again, it will close. That’s in addition to closing if you click on another input or in the document body outside the drop down. And it works for Firefox, IE and safari and avoids the scrollbar problem.
So I removed this block in the original:
—————————————-
$input
.click(function(){
if (!inFocus) {
$container.toggle();
}
})
.focus(function(){
if ($container.not(‘:visible’)) {
inFocus = true;
$container.show();
}
})
.keydown(function(event) {
switch(event.keyCode) {
case 38: // up
event.preventDefault();
moveSelect(-1);
break;
case 40: // down
event.preventDefault();
moveSelect(1);
break;
//case 9: // tab
case 13: // return
event.preventDefault(); // seems not working in mac !
$(‘li.’+opt.hoverClass).trigger(‘click’);
break;
case 27: //escape
hideMe();
break;
}
})
.blur(function() {
if ($container.is(‘:visible’) && hasfocus > 0 ) {
if(opt.debug) console.log(‘container visible and has focus’)
} else {
hideMe();
}
});
——————————-
And replaced it with my version as follows:
————————————
$(‘body’).click(function() {
$(‘.selectbox-wrapper’).hide();
inFocus = false;
});
$input.click(function(event){
event.stopPropagation();
if (inFocus) {
inFocus = false;
$container.hide();
}
else {
$(‘.selectbox-wrapper’).hide();
inFocus = true;
$container.show();
}
});
—————————————-
And as I said before, I removed the keyboard navigation because I don’t need it and it’s more important for me to get the ‘click’ interaction working. Also, I doubt the code is good or perfect but it worked for my implementation :)
hi,
i’ve some problem with OnChange … i’ve tried to follow this comment: http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/#comment-154
But this don’t work for me .. someone can explain me how to get a value with onchange?
Thanks!!!
Hi Brainfault, I’m just letting you know that your plugin is great and I had to make the following changes to get it to work here :
Add :
var $j = jQuery.noConflict();
At the top before anything becomes a function.
Then change all instances of $( into $j(
to set jQuery’s compatibility mode.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Thanks,
Tony
Is there a compressed version of the code? It works perfectly for me (thanks for that), but when I compress the code it stops working for me, I was using “http://javascriptcompressor.com/”.
Hi, I found a nasty BUG.
when option tag has value that contains underscore then setting value to orginal select tag doesn’t work.
To replicate this bug use following HTML.
test
test2
Oops… cutted my html.
Once again:
[select name="test"]
[option value="value_with_underscore"] test [/option]
[option value="value_with_underscore2"] test2 [/option]
[/select]
Hi. Is there anyway to make it so that anything that comes after the selectbox does not wrap to the next line?
Finally a solution that works! Many thanks for sharing
hello brainfault and thank you for this very usefull and simple to use plugin.
In my page I use the selectbox as a jump menu. Unfortunately whenever I apply the Selectbox Replacement code, the jump menu looses it’s functionality. I don’t understand why and I was wondering if you could help me. It’s just a few lines of code so please take a look of it. I’m sure you can help.
$(document).ready(function() {
$(‘#jumpMenu’).selectbox({debug: true});
});
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+”.location=’”+selObj.options[selObj.selectedIndex].value+”‘”);
if (restore) selObj.selectedIndex=0;
}
first link
second link
third link
Can you please reply to my question? I have tried a lot of things but didn’t manage to solve this yet. There is obviously some kind of conflict between your script and the function that’s been called onclick event. Please help
First of all, thanks for this plug in. It is very easy to implement.
I have a problem when using Opera, IE7(+) and Safari. If a scrollbar is present in the list of options, clicking it will hide the list. It seems like the scrollbar takes the focus and triggers the close.
@shanethehat please take a look at the newest version http://bit.ly/bS1M6H and check whether it’s working
I have the same problem as shanethehat, and im using 1.2 and IE 8, works good in ie 7