22 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. Don

    06|Jul|2008 20

    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?

21. Fabbio

    18|Sep|2008 21

    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

22. girvar

    19|Sep|2008 22

    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.