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 2 (win, mac, linux), Firefox 3 beta5 (win, mac), IE6, IE7.
Note: Version 0.6 is stable enough and fix a major bug dealing with scrollbar in IE but another major bug popup this time with safari, the list just doesn’t appear when you click on the replaced select box.
Usage
$(document).ready(function() {
$('#myselectbox').selectbox();
});
Options
$(document).ready(function() {
$('#myselectbox').selectbox(
{
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 0.5
Version 0.4
Know bugs
- Major
- The plugin doesn’t work with Safari Mac
- On Mac with both Safari and
Firefoxwhen you select a value using Enter key the form is submitted, it seems that “preventDefault” is not working. If anyone has an idea about how to resolve this, just drop me a mail or a leave a comment. With IE when you click on the scroll, the list of options disappear.
- Minor
When an option is selected using the mouse and when you reopen the list the selected option is not highlighted anymore.
Changelog
- 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
TODO
* A complete rewrite of the plugin
* Callback support on all stages (start, stop, change, etc…)
25 Responses
Peter Antonius
08|Apr|2008 1The example works fine for me in Mac Safari 3.1 (5525.13) ?
brainfault
08|Apr|2008 2that’s strange on my (home) Mac Safari 3.0.4 (not sure this is the exact version but it’s definitely not 3.1) it doesn’t work !
Peter Antonius
08|Apr|2008 3It’s not working at all on Windows Safari 3.0.4 (523.15). So the 3.0.4 problem seems to be on bot Mac and PC.
brainfault
08|Apr|2008 4yeah, with mac safari Version 3.0.4 (5523.15) and I really don’t know what’s going on !!
Peter
09|Apr|2008 5It works in Safari 3.1 on Windows but the scroll bug that was fixed for IE exists there….
Taha Paksu
29|Apr|2008 6If it displays two instead of one selectbox, what might be the reason?
Isabelle
29|Apr|2008 7I’ve come across a major bug in Opera. If your selectbox is located in a div with display:none initially, and you later on display the div, the select wont work at all. It looks nice, but nothing happens when you click it. I read some comments to the previous version, that said that similar bugs where fixed if you use the latest jQuery, but this bug wont go away. Any comments/solutions to this?
Isabelle
05|May|2008 8Hello again! Have been through all files over and over, and discovered that the bug I mentioned above is caused by the container css. If I remove overflow:auto from the container css, the select works in Opera. It doesn’t find the background image though.
brainfault
05|May|2008 9hi, I really don’t know how to fix it, it’s a css problem and unfortunately I’m not very good with it.
anyway I’m going to completely rewrite the plugin and I hope that many issues will disappear.
nachokb
06|May|2008 10I found plenty of instances in the code where $() is invoked or one of its member dereferenced.
In many circumstances, the use of $ is not possible (that’s what noConflict() is for). So, plugins should always use jQuery instead of $.
Diff:
***********************************************************************************
Left file: jquery.selectbox-0.6-beta1-noConflict.js
Right file: jquery.selectbox-0.6-beta1.js
55c55
var $select = jQuery(selectobj);
91c91
jQuery(’li.’+opt.hoverClass).trigger(’click’);
103c103
if(jQuery.browser.msie || jQuery.browser.safari){ // check for safari too - workaround for webkit
129c129
$container = jQuery(container);
138c138
var $input = jQuery(input);
150c150
var lis = jQuery(”li”, $container);
162c162
jQuery(lis[active]).addClass(opt.hoverClass);
166c166
var el = jQuery(list[active]).get(0);
177c177
var li = jQuery(”li.”+opt.currentClass, $container).get(0);
181c181
$input.val(jQuery(li).html());
200,204c200,204
< li.setAttribute(’id’, parentid + ‘_’ + $(this).val());
< li.innerHTML = $(this).html();
< if ($(this).is(’:selected’)) {
< $input.val($(this).html());
li.setAttribute(’id’, parentid + ‘_’ + jQuery(this).val());
> li.innerHTML = jQuery(this).html();
> if (jQuery(this).is(’:selected’)) {
> $input.val(jQuery(this).html());
> jQuery(li).addClass(opt.currentClass);
207c207
jQuery(li)
219c219
var fl = jQuery(’li.’+opt.hoverClass, $container).get(0);
221,222c221,222
< $(’li.’+opt.currentClass).removeClass(opt.currentClass);
jQuery(’li.’+opt.currentClass).removeClass(opt.currentClass);
> jQuery(this).addClass(opt.currentClass);
****************************************************************
nachokb
thomas
08|May|2008 11just tested v6 on safari for windows 3.1, and while the disappearing menu with scrollbar problem is present, you can still tab through the form just fine and you can use arrow keys to move through the scrollable list. so it’s not a total loss, especially given that less than 2% of my audience actually uses safari on any operating system, whether mac or pc :)
thanks for such a fantastic script! It’s definately being used in my projects now :D
thomas
08|May|2008 12maybe i overlooked it somewhere, but is there a way to assign different widths for different selectboxes? the provided css controls all selectboxes globally. thanks
brainfault
08|May|2008 13you just have to apply a width to the “real” selectbox the replaced box will look for that width and apply it
Johan
08|May|2008 14Hi,
I have included the onchange event for this.
function setupInput(options) {
var input = document.createElement(”input”);
var $input = $(input);
$input.attr(”id”, elm_id+”_input”);
$input.attr(”type”, “text”);
$input.addClass(options.inputClass);
$input.attr(”autocomplete”, “off”);
$input.attr(”readonly”, “readonly”);
$input.attr(”tabIndex”, $select.attr(”tabindex”)); // “I” capital is important for ie
$input.attr(”onchange”, $select.attr(”onchange”)); // “I” capital is important for ie
return $input;
}
function setCurrent() {
var li = $(”li.”+opt.currentClass, $container).get(0);
var ar = (”+li.id).split(’_');
var el = ar[ar.length-1];
$select.val(el);
$input.val($(li).html());
eval($input.attr(’onchange’));
return true;
}
this was a 2 second fix .. but you could include something like this in the next release, that would be great as its needed for event driven dropdowns :)
thanks
thomas
08|May|2008 15thanks for the reply, but this doesnt seem to be working at all. i’ve removed the width from the .selectbox class, and applied it directly to the select tag, but it doesnt change the width. I’ve also tried adding a seperate class for each selectbox and only assigning different widths, but no luck. am i missing something?
thomas
15|May|2008 16still having a problem with this. does anyone else know a work-around? ive tried everything i can think of, short of creating a copy of the js for each width i need, which im definately not doing……
Colm
23|May|2008 17Thomas
Here is the solution from Taha Paksu
just added the line in setupinput function :
$input.css(”width”, $select.css(”width”));
and defined the style in select tag using an inline style.
eg select id=”..” name =”name” style = “width:100px”>
Alexander Farkas
02|Jun|2008 18Hallo,
i made some changes to 0.6beta1, too.
1. added scrollintoview feature
2. added aria-support
3. no need to specify the value in the value-Attribute
4. some little bugfixes/improvements
here you can download it:
http://www.protofunc.com/scripts/jquery/selectbox.zip
pkt
09|Jun|2008 19Hey, great work!
I have a problem. I have a triple combo which filters the values depending on the values (i.e. if you select an element in the first combos, only certain elements will appear in the second and third. Same with the second combo).
I’m filtering the options in the ’select’ elements, but this changes are not being reflected in the replacement box.
I guess I need to re-init the values (empty the container and call init again?), but just wanted to ask and suggest that perhaps it would be a good idea to have a refresh function to recover again the values from a selected combo.
Thanks!
pkt
10|Jun|2008 20Probably not the best way, but in the meantime I’m doing:
$(’#’ + id + ‘_input’).remove();
$(’#’ + id + ‘_container’).remove();
$(’#’ + id).selectbox();
Whenever I need to refresh the elements. Sure, not the best way, but it works.
bCl
14|Jun|2008 21Select box not work for optgroup
Tim
25|Jun|2008 22Has anyone else encountered a bug where if you have angle brackets ( ” ) in the first option, they are not properly displayed? They show up as “> or <” in the selection. If anyone else sees this let me know, I’d like to know if this is a legitimate bug or if I’m doing it wrong. The standard “vanilla” select box in IE does not have this display problem for me.
Tim
25|Jun|2008 23Arrgh.. Well my last comment didn’t work very well - apparently the forum engine doesn’t handle angle brackets very well either. Anyway, hope it was still parse-able..
Tim
03|Jul|2008 24How do I get a copy of the instance once the select box has been created? If I call $(’#'+id).selectbox() it creates a new instance of the select box, which is definitely not what I want… Surely there must be a way to get a handle on the previously created select box?
pkt
03|Jul|2008 25Tim, look at my previous comment, the selectbox creates an input and a container (for the closed and opened states). You can access those with
$(’#’ + id + ‘_input’) and $(’#’ + id + ‘_container’)
As for the gt and lt symbols, no idea, sorry.
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.