82 Responses

1. Corey

   14|Feb|2008 1

   Very nice! Few thoughts, it would be nice if behavior was exactly like select behavior with a different look (or at least the option to). Tabbing into field would not automatically open list, key press would select item in list with key pressed, tabbing from select box would move to next field in form. This way people don’t feel like they’re using something different, but still looks a heck of a lot better.

2. brainfault

   14|Feb|2008 2

   well, that’s an idea, I’ll try to make it as an option for future release

3. Max

   22|Feb|2008 3

   To get the “OnChange” to work, just add this simple line in the context:

   .click(function(event) {
   var fl = $(’li.’+opt.hoverClass, $container).get(0);
   if (opt.debug) console.log(’click on :’+this.id);
   $(’li.’+opt.currentClass).removeClass(opt.currentClass);
   $(this).addClass(opt.currentClass);
   setCurrent();
   hideMe();
   $select.change(); // <<< THIS LINE
   });

4. Aaron

   28|Feb|2008 4

   hey there, very nice plugin. Just one problem I’m having is to do with multiple SELECT replacements with multiple widths.

   Is there a way to declare the width of a specific SELECT when initiating it or do they all have to be the same width in accordance with the .selectbox class in the CSS file?

5. Aaron

   28|Feb|2008 5

   lol, nevermind, I just figured it out. Sorry , I’m a newbie when it comes to jQuery. Really great plugin now!

6. brainfault

   28|Feb|2008 6

   you are welcome :)

7. Taha Paksu

   06|Mar|2008 7

   i solved the multiple width problem i think.

   just added the line in setupinput function :

   $input.css(”width”, $select.css(”width”));

   and defined the style in select tag like :

   and that solved the problem.

   this script rocks by the way :D Thanks a lot :D

8. Peter Antonius

   14|Mar|2008 8

   Hi,

   first of all, thank you for the plugin!

   I’ve managed to solve the “case 13″ problem (pressing return) on firefox on mac.

   Max way didn’t work for me, but however, adding “$select.get(0).blur();” instead of “$select.change();” works fine. (Haven’t tried it out if that breaks anything, but it works on safari 3 and firefox).

   But Opera in Mac still submits the form.

9. brainfault

   14|Mar|2008 9

   I’m going to give it a try tonight.

   thanks for sharing

10. Peter

    20|Mar|2008 10

    Nice work but there’s a major bug…. scrolling works only in Firefox. Trying to scroll in IE6/7, Opera and Safari will make the dropdown disappear.

11. THD

    26|Mar|2008 11

    Thanks for an easy to use script!

    I’ve added support for an extra CSS class to your script. It works very nice for dropdowns with a starting text asking the user to make a selection. Both the item in the dropdown list and the input field are styled with this class (works best with subtle color and font changes).

    Added lines are:
    opt.emptyClass = opt.emptyClass || “empty”; // Added in constructor
    if (el==”") { $input.addClass(opt.emptyClass); } else { $input.removeClass(opt.emptyClass); } // Added in setCurrent()
    if ($(this).val()==”") { $(li).addClass(opt.emptyClass); if ($(this).is(’:selected’)) { $input.addClass(opt.emptyClass); } } // Added in getSelectOptions

    It would be nice if you included something like this in a later release (so I won’t have to modify it manually if I ever update the plugin).

12. Gonzalo

    28|Mar|2008 12

    Hi, I tested your control, and it’s great.. however, as Peter stated, the scroll doesn’t work in IE6/7, and also It would be great to have the control work when the select is multiple (when it doesn’t show as a dropdown, but as a listbox)

    Regards

13. Bernd Matzner

    28|Mar|2008 13

    Here’s my workaround for IE:

    instead of calling hideMe() directly in the blur event on $input, we check if browser is IE and document.activeElement is the surrounding container created by the plugin. If it’s not, then the user clicked somewhere outside of the dropdown, if not we force a focus in the $input object.

    if($.browser.msie){
    if(document.activeElement.getAttribute(’id’).indexOf(’_container’)==-1){
    hideMe();
    } else {
    $input.focus();
    }
    } else {
    hideMe();
    }

    Bernd

14. leo

    31|Mar|2008 14

    Hi!

    Very nice plugin ! :)

    Is there a way to make it call some callback function or submit the form on each change ?

    Btw, where is the doc ? I had to dig into the source code to find about existing parameters…

    Regards

15. brainfault

    01|Apr|2008 15

    Hi
    @leo : actually the answer is no, but I maybe in the future, my first concern right now is to make the plugin work properly on IE and the doc will come along the IE bug fix (I hope :)
    @Bernd Matzner : I’m going to try it asap, thanks

16. THD

    01|Apr|2008 16

    @Patifier (previous thread): Thanks for the onChange code! I verfied that it works with IE6, IE7, FF2, Opera and Safari (on XP).
    I added something to make it compatible with some callback functions, specifically the ones that rely on the ’selectIndex’ value to determine the currently selected value of a selectbox (took me a while to find this problem since other events work perfectly without it):
    Change the line ‘$select.val(el);’ in the function setCurrent() to:
    $select.val(el).attr(”selectedIndex”, $container.find(”li”).index(li));

    Another change I made was to add support for absolute positioned elements. The line that sets the width in the Init() function needs to be replaced with:
    if ($select.css(”width”)) { $input.css(”width”, $select.css(”width”)); }
    $container.width($input.outerWidth()-opt.containerBorder).css($input.offset({ scroll: false })).appendTo(”BODY”).hide();
    Notes:
    - Obviously you need to remove the ‘append($container)’ from the contructor if it’s appended in the init()
    - With this modification the width of the replacement depends on the witdth of the original SELECT field (usefull if you replace selects with different widths).
    - Also the container does not nessecarily need to have the same padding as the selectbox to be just as wide.
    - It can also be done without the use of the JQuery dimensions plugin with some minor changes.
    - The CSS needs to be ‘position: absolute;’, and the ‘margin-top’ should be the height of the selectbox (so the container is positioned beneath).

    @BrainFault: I am interested in contributing to this plugin. I think the compatibility of the plugin is pretty good, only needs some minor tweaks. I would also like to add features that exceed the standard SELECT element so it’s more an enhancement than a replacement. One usefull idea is searching (in for long lists), so you can start typing and the first match is selected (with real SELECT elements the first letter is matched, so that is the least that should be implemented, but it can easily be much better than a normal SELECT box).
    If this is possible do you have a public list of TODO’s and open bugs?

17. brainfault

    02|Apr|2008 17

    I’m going to test all the patches today and if they are ok, I’ll release a new version.

    @THD: All contributions are welcome, I’m going to upgrade to wp2.5 this weekend and setting up an independent page for the plugin, so we can have a list of know bugs and future enhancements etc…

18. Tal Ater

    11|May|2008 18

    Great work Brainfault.

    Any chance you will release a new version with some of the new suggestions and patches?

19. Eduardo Mello

    27|May|2008 19

    There’s an arrow on each option, i can’t get rid of it. I’ve seen the CSS for the ul and the li, and I can’t see how to get rid of it. Please answer me.

20. Jphillips

    21|Jun|2008 20

    Great workaround; however I have an issue I hope you could solve. On the site I’m working on we modified our .htaccess to change a truncated url to the full get url so that the website can be crawled. Here’s and excerpt from the .htaccess file

    RewriteRule ^view/([0-9]+)$ view/$1/ [R]
    RewriteRule ^view/([0-9]+)/$ view.php?category=$1

    basically what this does is tell the server to change links that look like this

    http://www.example.com/view/13/
    to this
    http://www.example.com/view.php?category=13

    The problem arises because the selectbox script (or maybe it’s jquery I don’t know) appears to look to the displayed url rather than the parsed url, so it doesn’t load the select box.

    Any clues or solutions would be great.

21. Don

    06|Jul|2008 21

    Great plugin, one question though. I am trying to use this in a form that is invoked through a thickbox. If I view the page itself, it works fine; however, when loaded in an iframe in the thickbox, nothing happens. Thoughts?

22. Fabbio

    18|Sep|2008 22

    Great plugin indeed! I’ve fixed a minor bug:

    * Version: 0.5 – line 160

    I’ve added this:

    $input.val($(li).html().replace(’&’,'&’));

    as otherwise ampersands would be shown as & once selected

    hopfully someone will write a striphtmlcharacters feature :D

23. girvar

    19|Sep|2008 23

    ON onChange , i m calling my own javascript function, in hich I want to change selected index i.e i want first option to be selected while previously 2nd or 3rd option is selected. How can i do that ?? Please help!!
    I am writing
    document.getElementById(”SelId1″).options[0].selected = true;

    It does not work.

24. Phil

    09|Oct|2008 24

    Cool pluging! The only problem, like Peter and Gonzalo already said, is that the scrolling bar desapears when it’s clicked. I would really appreciate if someone put a fix code here. Thanks!

25. Jool

    31|Oct|2008 25

    Peter Antonius: “But Opera in Mac still submits the form.”

    I just had to say…. the three people in the world that use Opera on the Mac sure are going to be put out by that!

    Anyhow, thanks for the plugin. My main problem was that my designer insisted on totally styled dropdowns with button graphics, etc. so this is perfect.

26. Terese Lucas

    13|Nov|2008 26

    5m12emh008j2ak18

27. Mark McDonnell

    25|Nov|2008 27

    Hi,

    I’m having trouble getting the ‘onchange’ event to fire?

    What would I need to update in the js code to do this,
    as it seems something in the plugin is overriding my js event listener?

    Thanks for any help!

    M.

28. Mark McDonnell

    26|Nov|2008 28

    I managed to get the ‘onchange’ event to work (caveat: I have to hardcode onchange=”” onto the selectbox)…

    SEE: http://www.brainfault.com/2007/07/23/select-box-replacement/ and comment 13,14 for fix to plugin

    …the problem now is trying to work out what element is selected!?

    Currently my hard coded onchange event calls a function which does nothing but alert(this) and that just returns a jQuery object.

    Any help would be greatly appreciated (I’ve not got a lot of time here either :-( as I used this plugin in a project and although it solved our design issues with select boxes, now that our server-side developer has finally gotten round to start building a dynamic back-end system we’ve discovered this onchange event issue and it’s causing us big delays in getting our project finished without just scraping the plugin altogether!).

    Thanks again!

    M.

29. Jacob

    02|Dec|2008 29

    Can someone please post the solution to Aaron’s question above?

    “Is there a way to declare the width of a specific SELECT when initiating it or do they all have to be the same width in accordance with the .selectbox class in the CSS file?”

    Many thanks.

30. Jacob

    02|Dec|2008 30

    Of course I answered my own question after posting. Here it is:
    1. Add the following line of code to function setupInput:
    $input.css(”width”, $select.css(”width”));

    2. Add the width style to your select tag:

    This worked for me. I had to add the second to get it to work for IE, but it worked without that in Firefox.
    Thanks again.

31. Simon

    02|Dec|2008 31

    Great plugin, thanks! I have a question though…

    Has anyone managed to get this working for a select-box with multiple select’s allowed? I have one in a form that you are allowed to select up to 7 items but can’t seem to get it to work?!

    Any clues??

    Thanks

32. yaron

    11|Dec|2008 32

    hello there
    I’m having a few problems with the plugin
    1. i have a text box with a z-index=2 applied to it under the selectbox the problem is the selectbox under flows the text box, is there a way to change the z-index of the selectbox?
    2. i want to apply to different css styles to two different selectboxes is there a way to do it?

    thanks for the plugin it looks great

33. Darstik

    23|Dec|2008 33

    Hi everyone!

    @yaron’s question about different styles for different selectboxes, i did get custom styles for different selectboxes by placing them in divs with different classnames.

    For example, html looks something like this:

    ……

    ……

    and in selectbox.css you have for first class defined:
    .firstSelectBoxClass div.selectbox-wrapper {position:absolute; width:168px;}….. with all background, colors, sizes and other properties;
    and for second class:
    .secondSelectBoxClass div.selectbox-wrapper {position:absolute; width:120px;}…..

    this way i solved my problem with different select box styles (:

    Cheers!
    D

34. Olivier

    29|Dec|2008 34

    hello,

    nice work !
    I have a little problem…
    I have two select boxes on a page. When the first is used with an element selected, I want to regenerate the second one. The fact is that I can’t do this :(
    I tried to use the dom… recreating every necessary node in the ul and in the hidden select, including the input text for the first line. The result is that visually it’s ok, I have the dropdown with my new generated elements but I can’t click in the dropdown to select one :(

    Do you have an id of what happens ?

    Maybe I could only regenerate the options excluding the LIs, but in that case, how can I tell jquery that I want to regenerate the replacing select box ?

    hope you’ll understand my problem, I’m french, sorry for my poor english.

    thanks too for the guys who helped with the onchange and the selectedindex patch ;)

35. Olivier

    31|Dec|2008 35

    Hello !

    For those who have the same problem than me, I finally found a workaround on this page : http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/

    When the first select is used, I launch a function with the onChange event. This function updates the OPTIONs of the second select and that’s all.

    Next to this action, I just remove the container and the INPUT like that :
    [code]
    $('#' + id + '_input').remove();
    $('#' + id + '_container').remove();
    [/code]

    And then, I reload the select with the new values included with :
    [code]
    $('#' + id).selectbox();
    [/code]

    My new problem is that I applied the patch of the function setupInput() with adding the workaround for (not) fixing the width of the input element, but now, there’s no more right padding in that INPUT element nor in the LIs contained in the list :(
    I would like to fix the width of the INPUT with 10 more pixels but I can’t find a solution, maybe someone has an idea…
    This is the small patch for the width (just before the return instruction) :
    [code]
    $input.css("width", $select.css("width"));
    [/code]

    thanks in advance :)

    PS : just a note for brainfault : I tried to use the 0.6 beta but the patches provided in those topics are not implemented, could it be possible for you in the 0.6 stable release to apply them because designing the select is good but if we can’t manipulate it, it’s not as usefull as it could be. Unfortunately I’m a newcomer in jQuery so I’m not able to apply those heavy modifications for the moment. Hope I’ll be able to soon anyway :) thanks again for the good work ;)

36. kevin

    21|Jan|2009 36

    Hi brainfault,

    i modified the code to enable

    1. Keyboard navigation in the selectbox
    2. Close and Open the dropdown when u click the input element.

    Here is the code

    http://pastie.org/366490

    Thank you for the plugin :)

37. danilo

    08|Feb|2009 37

    OT: in the example code there are few syntax html errors: for”field1 and for”myselectbox”

38. issue

    09|Feb|2009 38

    it doesnt work using Safari with Jquery 1.3.1

39. issue

    09|Feb|2009 39

    it doesnt work using Safari with Jquery 1.3.1
    becuase when you select the option N of the selectbox or any option you cannot select the option N-1
    it’s weird!!!

    this problem happens on safari only

40. Mirko

    10|Feb|2009 40

    Hello I would like to know how to do a redirect to the page when you select an item in the list ..

    Thanks

41. XRumerMonstroZ

    13|Mar|2009 41

    Hi!
    Give me any link to downloading XRumer 5 for free!
    Thank you…
    Very-very much.
    I’m so need this program for promote my web projects!!! This software is the best thing for online promo and mass posting, you know…

    And, dont send me XRumer 2.9 and XRumer 3.0 – that versions are too old!

    P.S. Google cant help me((((

42. Brad

    19|Mar|2009 42

    kevin

    Awesome! I’ve been looking for a way of making the drop down open/close when clicking the input. The only thing left… I’d love for the container width to expand to the “options” in the select. So it behaves just like a firefox select if the options are wider than the specified width for the select itself

43. kit

    21|Mar|2009 43

    @38-issue: In order to fix for safari, opera, chrome, I added:
    function setCurrent(id){
    var li = $(”#”+id);
    var ar = id.split(’_');
    var el = ar[ar.length-1];
    $select.val(el);
    $input.val($(li).html());
    return true;
    }
    There maybe a better way to write this. Tested in FF3, Safari3-PC,IE7,Opera,Chrome

44. 1million

    01|Apr|2009 44

    Very nice, i just don’t like the “list style” you know…
    I think its more logic to put options and not in brainfault, mybe you can do this for the next release.

45. 1million

    01|Apr|2009 45

    Sory, on my comment in “brainfault” you considered the li tags ok?! Hehe :S

46. c.j. anderson

    02|Apr|2009 46

    I found that adding something akin to the following to the $input.blur callback allowed the use of the scrollbar in MSIE:

    (event.srcElement.id === $input[0].id)

    the whole thing would then be:
    .blur(function() {
    //modified by CJA to allow clicking on scrollbar
    if (($container.is(’:visible’) && hasfocus > 0) || (event.srcElement.id === $input[0].id)) {
    if (opt.debug) console.log(’container visible and has focus’)
    } else {
    hideMe();
    }
    });

47. Andrej

    09|Apr|2009 47

    Andrerson, thx for your hack :)

48. Libwoodiabach

    13|Apr|2009 48

    I wonder if web industry affected by crisis as well? and to what extend? Will the admins continue this web?

49. Morromunfaiff

    14|Apr|2009 49

    I wonder if web industry affected by crisis as well? and to what extend? Will the admins continue this web?

50. Vince Delmonte

    14|Apr|2009 50

    The style of writing is quite familiar . Have you written guest posts for other blogs?

51. Maria Fisher

    21|Apr|2009 51

    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.

52. Gunah

    14|May|2009 52

    http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/
    these version has no support for keyboard navigation

53. moxxix

    19|May|2009 53

    До поры – у норы, а в пору – в нору(:

54. fliedlode

    25|May|2009 54

    suborn virginia slims ultra light cigarettes
    shoddy doral cigarette cheap doral cigarette|cheap doral cigarettes
    low-priced doral cigarettes tuppenny doral cigarettes
    cheaply gpc cigarette budget-priced gpc cigarettes
    tuppenny gpc cigarettes cheap gpc cigarettes
    discount doral cigarettes

55. gopas

    05|Jun|2009 55

    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?

56. hamid

    08|Jun|2009 56

    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?

57. labumbox

    17|Jun|2009 57

    слово “жопа”

58. silarvafvoimi

    18|Jun|2009 58

    Петербуржская Школа Правильного Питания (7 минут от метро “Чернышевская”) приглашает всех желающих избавиться от лишнего веса на бесплатные вечерние (18:45) ознакомительные занятия 15, 16, 18, 19 и 22 июня 2009г.
    Более подробная информация и запись на сайте – http://hudeem-vmeste.com

59. Padwaywal

    11|Jul|2009 59

    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.

60. Rolf

    02|Sep|2009 60

    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();
    }
    });

61. Koen

    04|Sep|2009 61

    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

62. Rolf

    05|Sep|2009 62

    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

63. Rodrigo Barba

    09|Sep|2009 63

    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! :(

64. Matti V

    18|Sep|2009 64

    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!

65. techsupp006

    26|Sep|2009 65

    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.

66. techsupp006

    26|Sep|2009 66

    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.

67. abdul chalik

    08|Oct|2009 67

    good plugin…thanks

68. immesePeads

    29|Oct|2009 68

    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

69. Baidwaymayday

    30|Oct|2009 69

    An antidepressant is a medication used primarily in the treatment of depression.
    Depression can occur if some of the chemicals called neurotransmitters in the brain are not functioning effectively.
    There are three specific chemicals that can affect a person’s mood
    Antidepressants affect one or more of these chemicals in different ways to help stabilize the chemical imbalance often seen in depression.

70. House

    30|Oct|2009 70

    потрясающие идеи…нам перенять бы …великолепно.

71. Tom

    03|Nov|2009 71

    Just wanted to let you know that the plugin does not work correctly when the “value” of an option contains an underscore (_)….

72. Bitka

    02|Dec|2009 72

    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.

73. Bitka

    02|Dec|2009 73

    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 :)

74. fabio

    04|Dec|2009 74

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

75. Tony

    04|Dec|2009 75

    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

76. Phil

    07|Jan|2010 76

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

77. Kamil

    15|Jan|2010 77

    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

78. Kamil

    15|Jan|2010 78

    Oops… cutted my html.
    Once again:

    [select name="test"]
    [option value="value_with_underscore"] test [/option]
    [option value="value_with_underscore2"] test2 [/option]
    [/select]

79. Jeff

    17|Jan|2010 79

    Hi. Is there anyway to make it so that anything that comes after the selectbox does not wrap to the next line?

80. datingwebmaster

    26|Jan|2010 80

    Finally a solution that works! Many thanks for sharing

81. zekia

    29|Jan|2010 81

    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

82. zekia

    08|Feb|2010 82

    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