Blog

styleSelect 2.0.0

Download

This jQuery plugin replaces the standart select element with a custom looking selectbox. Plugin has keyboard support.

Styleable scrollbars by jScrollPane.

Suported browsers:

Demo

http://www.8stream.com/scripts/styleSelect

Usage

$("select").styleSelect();       

//with styled scrolling and custom stylesheet class
var options = {
               styleClass: "selectDark",
               jScrollPane: 1
               }
    
$("select").styleSelect(options);

Options

Name/options Type Default
optionsTop Options list distance from top
string 26px
optionsLeft Options list distance from left
string 0px
optionsWidth Options list width (0 - same as main selector)
string 0
styleClass Select style class
string selectMenu
speed Options list opening speed ('slow','medium','fast',milliseconds)
string, number
0
selectTrigger Event to trigger on original select ('change','click') string change
jScrollPane jScrollPane styled scrollbars ('1','0') int 0
jScrollPaneOptions jScrollPane settings: http://jscrollpane.kelvinluck.com/settings.html
object

Download

Comments

Sujilesh (04.19.12)

Thanks man...!! Great plugin..

Eli (01.27.12)

I've ran into an issue where I had 4 forms, each with a drop down in one page and all drop downs had the same name. Even though each form is essentially identical the functionality of each needed to be unique and handled via JS. While I kept the name of each drop down as non-unique all 4 handlers were executed while only one was operational. It would be nice to have this script be based on id, rather than name, as it would allow for a nice non-JS degradation of the forms.

Majo (01.16.12)

Hi, I don\'t know refresh content after AJAX refresh. Can you help me with this ?

Gleenk (10.27.11)

It continuously goes in conflict with fancybox or load action.

Jeremy (09.23.11)

Your solution is great, but isn't quite the same as a native select menu. Once the select menu has focus, you should be able to type the letters of the options without having to open the menu. In your example, I should be able to type "Animals", and then your select menu would populate 'Animals' without opening the menu. When the menu is open, you should also be able to type a value, which would then highlight the option in the drop down.

Lukas Oppermann (09.09.11)

Hey, I really like this Plugin, but I have the same problem with the disabled fields. I guess the plugin just treat them as normal. Are there any plans to fix this? Also it would be nice if you could assign a state e.g. "active" to the parent div or the activeSelect div. This would make styling easier.

Lukas Oppermann (09.08.11)

I had a problem that the select menu would get small if I did not set a width in the options menu. This was because I was using a border and the width() command is used to calculate the objects width. To fix it just change line 255: $(this).css({'width' : elementList.width()}); to $(this).css({'width' : elementList.outerWidth()});

Ronald (08.31.11)

When i want to use the option : optionsWidth, it doesn\'t work. i\'ll try directly to the download file like : var options = { styleClass: \"selectDark\", jScrollPane: 1, optionsWidth: 500 } Possible to debug it ? Thanx a lot, great plugin !

Eurico Vidal (08.17.11)

I had a problem with values with spaces (ex.: value="text bla") I corrected thus: on file style-select.js in line 70 this: optionsList += '

Frenchy (07.30.11)

What a great resuorce this text is.

Jorja (07.30.11)

That's way the bestest anwesr so far!

developer (04.18.11)

Hello! I have a big problem with disabled option using styleSelect 2.0.0. If I set value for one option to disabled it works, but without this plugin. If I use this plugin "disabled" option doesn't work anymore. Does someone has any ideas, why "disabled" doesn't work with this plugin? Otherwise nice plugin ;-).

adam (04.07.11)

I really like the direction of this, but it needs to provide automatic handling for option groups. Currently it seems to just drop them entirely.

rubycat (02.22.11)

OMG the tabindex that you force on all the form elements through the script totally messes up accessibility for anyone needing to tab through the page.

jbueza (01.31.11)

are you able to get this up on github? using "$" in a form name throws errors and the community could land a fix for it.

Ray (01.23.11)

Hi, just found a bug in the code. I replaced this line: var realSelector = $('select[name="'+orgSelectbox+'"]'); with var realSelector = mainSelect; --- And now styleSelect works fine for me! The reason I had to change it was my [select] menu did not have a "name" attribute. Hope that helps!

Ray (01.23.11)

Hi, Just testing out your jQuery plugin and came across something you might have missed. When hiding the [select] menu and replacing it with your new one, you must make sure that the selected option is "selected" in the original [select] menu as well.

Nathan Brouse (01.15.11)

i noticed that if you change the height attribute in .styleSelect_item_content from \"height:140px;\" to \"max-height:140px;\" it works well so you don\'t have to do different classes for dropdowns that don\'t have very many options in them and ones that do have a lot of drop downs. figured this comment may help

Simon (01.13.11)

if you use 2 selectbox then 1 hide, then show, background not work until you will select option...why?

Anton (11.26.10)

Hi, the last 2 days I have been working with this plugin, which is excellent and much lighter than UI's upcoming bloated Selectmenu. Just a suggestion, it would be nice to have more styling classes. The div #selectbox_ was not difficult but hacking span.activeSelect was not easy. I also had to do a hover class on the li items as IE does not support li:hover Anyway, thank you very much for making this plugin available. Ciao.

JennyChurch (11.06.10)

People in every country get the loans from different banks, because it is easy and fast.

asxoniles (10.26.10)

sry the comment doesnt allow html code examples: what is was writing was that if you have an identifier tag inside an option element like br (and the < br /> version too) the resulting li element could include this br tag, thus create a second line

asxoniles (10.26.10)

I do have a feature request if thats possible? Can you allow multiline select fields? for example if you have blaline2 you would get: blaline2... something like this would be awesome

Carlos (10.21.10)

Hi, Very nice plugin. I really enjoyed it. You authorize the placement of the plugin as a demonstration and tutorial on wisejs components? In site www.wisejs.com As was done for MB Menu (jQuery plugin), with proper authorization. Initially "not wrapped" and when possible "wrapped" (unbound and bound). Best regards, Carlos

Siim (10.18.10)

Previously commented bugs are fixed.

asxoniles (10.12.10)

dunno if its a bug or an error on my side, but using the minified version i get following error in firebug $(".select1").styleSelect is not a function (?)()10_SEC...rb.html (Zeile 25) noConflict()jquery....min.js (Zeile 26) inArray()jquery....min.js (Zeile 33) [Bei diesem Fehler anhalten] $(".select1").styleSelect({styleClass: "select1_styled"}); the uncompressed js works

Siim (09.30.10)

TO Panos: selectTrigger, is activated on original select box. You can chose wish jQuery event to trigger on original item ('change' or 'click') - when you click on of the menu items.

Daniel (09.28.10)

Is there a way to have a scrollbar in it?

Panos (09.11.10)

How does the selectTrigger works? Can you please explain with an example?

yemmi (10.21.09)

very nice plugin, but there is an issue with IE and Opera10 if u use 2 select one below another, there is problem with visualization, like theese screenshot below: http://bit.ly/4g47nT

Leave a Reply

(required)
(required, will not be published)
Reload Image

Need a Plug-in?

If you need a plugin and you think others may need it, then let us know at: info@8stream.com

CONTACT

8Stream OÜ

Reg. nr. 11507446

 

info@8stream.com

 

Search

Sitemap

© 8STREAM 2009 | Powered by Pirn CMS

CSSXHTML