SelectBox replacement : Version 0.4 released
December 12th, 2007 by
Sadri Sahraoui | 
A quick note to let you know that I’ve released a new version of the jquery selectbox replacement plugin, this is mainly a bug fix release. I would like to thank ‘pawel maziarz’ for his contribution.
I’ve received a request to make a license modification and I did :) , so now the plugin is licensed under a dual license GPL/MIT
Changelog
- 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,
I was using your plugin, thx.
It works not very good under Mac/Safari2.0.2 (multi-safari installation) at least, I was not tested deeply. I have selectbox wrapper limited by height with overflow-x:hidden, navigation through options by scroll button. Selection was working incorrectly.
This fix helpt me. Hope it will be useful.
.click(function(event) {
if (opt.debug) console.log(‘click on :’+this.id);
//next line was added
$(‘LI’, $container).removeClass(opt.hoverClass);
$(this).addClass(opt.hoverClass);
Good luck.
Sorry, overflow-x:hidden -> overflow-x:auto
Hi,
May be you’ll find useful such ideas:
var hasfocus = 0;
var mouseOverOnContainer = 0; //added
…..
$container.addClass(options.containerClass);
//next lines added to process correctly scrolling of container with help of scrollbars
$container.mouseover(function(){mouseOverOnContainer = true; }); $container.mouseout(function(){mouseOverOnContainer = false; });
//return focus to input, because blur handler should work
$container.scroll(function(){$input.focus();});
…..
// || mouseOverOnContainer added
.blur(function() {
if ($container.is(‘:visible’) && (hasfocus > 0 || mouseOverOnContainer)) {
Good luck.
Doesn’t work at all in any browser I tried FF 2, IE6/7. It styles up fine, until you click it and select something from a list.
FF2: Can’t click and select the first option. Selecting any option doesn’t update the drop down box with the value.
IE6: Scrollbar doesnt appear.
IE7: Clicking the scrollbar in the dropdown makes it vanish altogether.
@Max Turkin: I’m going to test this as soon as get home
@kevin : hmm I think you should format and reinstall your windows ;-). ok, seriously can you send a screenshot because I’ve just tested with IE6 windows & linux using wine , FF2 win & linux and it just works fine with me
This is a great plugin; thank you so much for creating it. I made one small modification you might find useful and I also have a request for the next version.
I added the “esc” key to the keyCode switch statement so the menu disappears when a user presses “esc.”
case 27: // esc
hideMe();
break;
My request is to have the ability to use the keyboard to jump to the different options in the drop down menu. I’ve only seen this done on one other plugin (http://dev.jquery.com/~cbach/demos/selectbox/) which works in Firefox but breaks in IE6+. It would be great if you could add this functionality.
On a side note, I’ll see what I can do about fixing the Mac “enter” bug. I haven’t had much luck so far.
There was a little error in die script. I had to hover the element, that was firstly selected, in order to select another one. Otherwise it didn’t work.
Here’s the function, i modified. Perhaps it’s usefull for someone:
function getSelectOptions(parentid) {
var select_options = new Array();
var ul = document.createElement(‘ul’);
$select.children(‘option’).each(function() {
var li = document.createElement(‘li’);
li.setAttribute(‘id’, parentid + ‘_’ + $(this).val());
li.innerHTML = $(this).html();
if ($(this).is(‘:selected’)) {
$input.val($(this).html());
$(li).addClass(opt.hoverClass);
}
ul.appendChild(li);
$(li)
.mouseover(function(event) {
hasfocus = 1;
if (opt.debug) console.log(‘out on : ‘+this.id);
jQuery(event.target, $container).addClass(opt.hoverClass);
})
.mouseout(function(event) {
hasfocus = -1;
if (opt.debug) console.log(‘out on : ‘+this.id);
jQuery(event.target, $container).removeClass(opt.hoverClass);
})
.click(function(event) {
if (opt.debug) console.log(‘click on :’+this.id);
$(‘.’+opt.hoverClass).removeClass(opt.hoverClass); // ADDED: removes all “select”-classes, so the clicked Element is the only “selected” one.
$(this).addClass(opt.hoverClass);
setCurrent();
hideMe();
});
});
return ul;
}
hi
a new version will be available by monday which will fix the highlight issue
First off, this is a really nice script. Thank you for sharing! I am experiencing a similar issue to Kevin:
IE6, IE7, Safari (Windows) have an issue with the scrollbar. When clicking to scroll, the menu disappears.