30 Responses

1. Brandon Aaron

   23|Jul|2007 1

   Nice work. Just wanted to let you know that there is a plugin called bgiframe that applies the iframe hack to get around the z-index issues with select elements in IE. http://jquery.com/plugins/project/bgiframe/

2. brainfault

   23|Jul|2007 2

   Oh!! didn’t notice it, a couple of hours wasted for nothing then ! feel so stupid thank you for the link

3. Hatem

   23|Jul|2007 3

   No time wasted Sadri, you don’t have control on the usual select, but with this plugin you can for example open it on focus :)

   it was one of the reasons to implement this, but you seems to forget :)

4. Gafitescu Daniel

   01|Aug|2007 4

   Still there is a problem.
   If I have 2 selectboxes and when I change something in first select it doesn’t trigger the onchange event for that specific select.

5. brainfault

   01|Aug|2007 5

   you mean that you have attached an onChange to html select element ? if it’s the case then we have a problem !
   the onchange event will no more fire, I think that I have to create a workaround to make it work.
   expect a new version soon ;)

6. des

   20|Sep|2007 6

   This is exactly what I’ve been looking for. I’ve been searching for over an hour now for a decent replacement to the select tag. Everything I’ve found is more of a menu, I can’t decide if they just don’t exist or my searching skills are rather poor today.

7. David

   19|Nov|2007 7

   Looking to style a select tag using jquery, so thanks for the post. However your intention for replacing the select element to prevent bleedthrough in IE6 is also (and more commonly/easily) accomplished by placing a transparent iframe between the popover content and the form underneath it. This also works for bleeding checkboxes and radio buttons.

   There is a jquery plugin called bgiframe that will help with this. Standard plugins such as Thickbox use it.

8. pawel maziarz

   19|Nov|2007 8

   hi,

   great plugin, thanks for your work. but I need to make a few changes in jSelect.js. so I made a quick work around for console.log for, I made also a quick solutions for options with the sames values (each select should have different id). at the and I deleted function .focus and replaced $input.width() with $input.css(’width’) to deal with hidden divs (for jqModal).

   cheers,
   drg

9. pawel maziarz

   19|Nov|2007 9

   p.s. the changes I’ve made, are here: http://labs.intersim.pl/drg/devel/js/jSelect/

10. Zeno

    29|Nov|2007 10

    Nice plugin : )

11. Lee

    29|Nov|2007 11

    If I am being thick I am sorry.

    But the ID will only work for one select.

    so how can I make it work for multiple selects on one page ?

    Hope you can advise.

    cool code though.

12. Doug

    30|Nov|2007 12

    Hey thanx fo this, have been looking for a quick and easy method for my drop downs.

13. Patifier

    30|Nov|2007 13

    To apply an onchange event:

    Under: “// hide select and append newly created elements
    $select.hide().before($input).before($container);”

    Add:

    // apply onchange if available
    if ($select.attr(’onchange’))
    var $change = $select.attr(’onchange’);

    And add the last two lines on this function:

    .click(function(event) {
    if (opt.debug) console.log(’click on :’+this.id);
    $(this).addClass(opt.hoverClass);
    setCurrent();
    hideMe();
    if ($change)
    eval($change);
    });

14. Patifier

    01|Dec|2007 14

    Workaround for IE6/7:

    if ($change)
    {
    var attr = $change;
    typeof attr == ‘function’ ? attr() : eval(attr);
    }

    That was hard to find a solution. Damn IE! :)

15. Patifier

    01|Dec|2007 15

    Workaround for IE6/7:

    if ($change)
    {
    var attr = $change;
    typeof attr == ‘function’ ? attr() : eval(attr);
    }

16. brainfault

    10|Dec|2007 16

    I’m sorry for this delay, I’ve been very very busy last days.

17. brainfault

    10|Dec|2007 17

    @Lee : you can do it using this : $(’select’).selectbox();
    it will apply to all select boxes present in your page
    @Patifier : sorry but the workaround doesn’t seem to work
    in IE6 (using wine linux)

18. Micheal

    13|Dec|2007 18

    Is it possible to use that selectbox inputs non selectable ? I tried to use it http://www.freearticlesarchive.com/category/Web/118/ but it did not work.

    thanks

19. Mac

    07|Mar|2008 19

    Waouu This is fantastic I love it :)

20. Ram

    24|Apr|2008 20

    Disable dropdown is working in IE but not in Fire Fox.

    I am doing it this way :

    elem = document.getElementById(\”".$name.”_container\”)
    elem.disabled=true;

    we can disable a div container in IE but not in Fire Fox.

    Is their a solution for this problem? If their, please let me know

    Thanks

21. Ram

    24|Apr|2008 21

    How to access the object when it has created by new jQuery.SelectBox ?

22. Colm

    07|May|2008 22

    Hi,

    Great work. I’m using it now. My question is how would I use the example for two or more select box’s on the same page, but apply a different width to the select box’s?
    I have 0 js skill so I have only tried stuff out on the CSS file.

23. brainfault

    07|May|2008 23

    to apply the plugin to more than one select box you just have to assign a shared class to the select boxes and then apply $(’myclass’).selectbox(), the width of the replaced select is taken from the original
    say your select has 100px as width then the generated will have a 100px witdth

24. Colm

    07|May|2008 24

    Thanks for the quick response. Sorry I didn’t word my question very well. I’ll try again.
    I have for example 2 select box’s that I want to replace using your genius plug in. However I would like to make select box A: 50px in width and,
    select box B 100px in width.
    How I would achieve this was my question.

25. Colm

    08|May|2008 25

    Ok I got it. Sorry found the solution on the other blog through the “NB: A new version can be located here” link above in a post by Taha Paksu. Then all you have to do is add the style line in the select tag something like . Hope that will help someone else. Thanks a million for the work everyone.

26. brainfault

    08|May|2008 26

    There’s a dedicated page for the plugin now and it’s there where you’ll find any update
    http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/

27. Hunka

    12|May|2008 27

    Its really a nice plugin, thanks :)

28. Daci

    23|May|2008 28

    Can you fix this to work wiht optgroup too?

    …

29. immo

    26|Jun|2008 29

    How can i add an onlick event such as

    I tried it like this example but it dosen’t work.
    Can you help me. Thx

30. Tim W

    29|Jun|2008 30

    newbie question:

    How do I change the value displayed in the select box with javascript, after the select box has already been created? I’ve tried:

    document.getElementById(’my_select’).selectedValue = x;

    which doesn’t give me an error but neither does it change the value of the select. I assume I need to call some method on the select box itself to get it to update? Any clues? Thanks for reading.