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

Basic Example

Download

Version 0.6 beta1 (latest)

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 Firefox when 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

  1. Peter Antonius

    08|Apr|2008 1

    The example works fine for me in Mac Safari 3.1 (5525.13) ?

  2. brainfault

    08|Apr|2008 2

    that’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 !

  3. Peter Antonius

    08|Apr|2008 3

    It’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.

  4. brainfault

    08|Apr|2008 4

    yeah, with mac safari Version 3.0.4 (5523.15) and I really don’t know what’s going on !!

  5. Peter

    09|Apr|2008 5

    It works in Safari 3.1 on Windows but the scroll bug that was fixed for IE exists there….

  6. Taha Paksu

    29|Apr|2008 6

    If it displays two instead of one selectbox, what might be the reason?

  7. Isabelle

    29|Apr|2008 7

    I’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?

  8. Isabelle

    05|May|2008 8

    Hello 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.

  9. brainfault

    05|May|2008 9

    hi, 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.

  10. nachokb

    06|May|2008 10

    I 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

  11. thomas

    08|May|2008 11

    just 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

  12. thomas

    08|May|2008 12

    maybe i overlooked it somewhere, but is there a way to assign different widths for different selectboxes? the provided css controls all selectboxes globally. thanks

  13. brainfault

    08|May|2008 13

    you just have to apply a width to the “real” selectbox the replaced box will look for that width and apply it

  14. Johan

    08|May|2008 14

    Hi,
    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

  15. thomas

    08|May|2008 15

    thanks 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?

  16. thomas

    15|May|2008 16

    still 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……

  17. Colm

    23|May|2008 17

    Thomas

    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”>

  18. Alexander Farkas

    02|Jun|2008 18

    Hallo,

    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

  19. pkt

    09|Jun|2008 19

    Hey, 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!

  20. pkt

    10|Jun|2008 20

    Probably 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.

  21. bCl

    14|Jun|2008 21

    Select box not work for optgroup

  22. Tim

    25|Jun|2008 22

    Has 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.

  23. Tim

    25|Jun|2008 23

    Arrgh.. 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..

  24. Tim

    03|Jul|2008 24

    How 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?

  25. pkt

    03|Jul|2008 25

    Tim, 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