Sunday, September 21, 2008

Select Box Factory 2.0 for jQuery

Note: Interested in show a bar chart? Try Select Box Factory 2.1 for jQuery (Help Guide & Download)

Otherwise, see 2.0 below:

Welp, i'm finally done transforming the code to be usable as a tool if you have jQuery 1.2.6+. I've spent many a week trying to perfect this in various browsers, and compiling a help guide.

Please see this link for everything you need to know.:

Select Box Factory 2.0 for jQuery (Help Guide & Download)

(give it a second to load, i've added a ton of dropdowns and code for examples in an accordion widget).


ThomasL said...

It looks promising :)
Filtering is acting weird with inputs :
's' or 'se'

The Ui Guy said...

Hey Thomas, thanks for checking it out! If you are using the demo, then note that with "s", all the items have s in the id, display name, or details. Only cougar, serval and tiger have "se" because serval has se as the first two letters in the display name, and tiger and cougar have "nose" in the details. It filters on hidden fields as well.

Bade said...

Quick question. Say I had a list of images that have been sorted, How would I submit the new order to the server?

The Ui Guy said...

Hey there, thanks for the interest. When the event of click is fired on any choice (programmatically or by mouse), the custom attribute of "select" becomes true. Just do an iteration over either the jQuery array which in my code is "this.choices". Collect the selections in an array that have "select" attribute as true. The order will be preserved because the internal structure of "this.choices" is what is sorted in the code, not the dom elements, so you are guaranteed the correct order every time.

taylormade said...


2 questions:

1. how would i load the graph as the default (instead of the menu)...

2. there seesm to be no documentation on how to handle onChange/Click/Focus, etc... I'm currently using the 'url-' argument, but want more control over the new window (size, positioning, menubar, etc..)



The Ui Guy said...

Hello eli, thank you for the interest! Neither of those things you are asking for can be configured. I can tell you how to do them by changing the source code. Let me know if you are still interested.

Savanna Samson said...

This is just GREAT.

How can I use the same settings (choices and so) in different lists.

with 2 words - 10 lists with different id-s, but with the same choices and options and so... without copy pasting tons of code

The Ui Guy said...

Savanna... there are several ways. Even with regular select boxes, you would have to do the same thing, so everything I would offer here is just opinions on this might be best done. The first thing you could do is use server-side code to store your choices in a variable, then simply print that variable over and over again. No mess. The next thing you could do is use the same div container, but use javascript cloneNode(true) (or whatever it is in jQuery), so for the options, simply clone the list. To get unique Ids this way, you may have to simply pre-pend the dropdown name to each id for uniqueness. There are many other ways, let me know if you want to know more.

Savanna Samson said...

thanks for the fast answer

Savanna Samson said...

I hope I'm not too cheeky, but may be other people will be helped with this.

Being not possible for the SBF to be dropdown when it has images for the list options,

Is there a way to resize the list width and height onMouseOver (most preferably without position absoulte)?

I know it should work the hard way - js with postition abs. but I have between 3 and 26 lists on 1 page and position abs. will make me tons of work to be crss browser and not ruining the pure css design.

THanks in advance!

The Ui Guy said...

SBF can certainly be a dropdown with images.

Yes, you can resize the list sure, the positioning does not matter. Simply assign a mouseEnter() function that sizes the list width and height for as long as mouseenter fires (or use mouseover, which fires more often). You will have to open up the source code and find the elements that make up the dropdown - there are 3. The toggle, the box container, and the elements within. If you set resizable to true() you can see this in action by dragging the bottom corner. In the source code, the resizable function does this work as a parallel example... and there may be a jquery function to help too.

If you want me to write up a sample script demo, then I can do that, no problem.

If you have 26 lists on one page, then I would not use position absolute either, as you already pointed out.

But none of these things would be part of the toolkit per se, they would just be advanced features beyond the source code. I am more than happy to provide people with demo scripts based on what they want to see, since it is simple for me to do, but i rarely update the source code unless it really should have been there and wasn't.

So, in this case, send me an email at and describe the exact problem you are having and I will send you a demo script.

Savanna Samson said...

hah, I don't know why, but somewhere in the help I read it cant be...
I just tried it and works perfect!

Thanks a lot,

I really didn't expect such perfect support of OS script runned by one man... I mean it's unique, and I used a LOT open source scripts...

Thanks and continue be so cool and write so cool stuff!

Savanna Samson said...

I hope I'm not spamming your blog and not disturbing you, but some other question:

Is there a way, in a dropdown list with images for choices,
after the image is chosen, when the list is closed instead of the specified name for that image, to see (and) the image itself?
Thank you!

The Ui Guy said...

Not spam at all... No worries.

The image as chosen choice in the top bar... is something I shut off intentionally. The reason being that the toggle bar has very little room and can be turned very ugly.

Consider that the dropdown choices can be wider and higher than the default and they still look ok. Then consider the same image put inside the toggle header... it would make the dropdown look so ugly...

The way around it... my recommendation is to set the css of the toggle to be as high as the tallest image, and perhaps just as wide. That way it will not become ugly.

If you want this feature, you would have to edit the source code. Give me a moment and I will tell you what line to change.

Savanna Samson said...

all the images are the same size, and just a little big bigger than the def. size of the toggle so it wont be sugly :)

The Ui Guy said...

Okay, to make life easier I created a new zip file, but I kept only what was required for the new demo.

If you grab it here and unzip it, you'll get the new code. See notes below.

Demo with image selections (zip)

First, clear your cache. Then open the file called selectboxfactory.html

Inside there is the demo of images as selections and bold red is the new option and its settings. you can go so far as to give the selected image a padding if you like, but if not, keep it 0. You can even intermix images and text, and the toggle should do the right thing.

You will also need to configure one css property for uiSelectBoxToggle... its background needs to have a color. For this demo I used #DBE2F0, which is blue.

background: #DBE2F0 url(dropdownarrow.gif) no-repeat right center;


For this all to work you need the SelectboxFactory 2.2j, but fear not. It can be dropped in right over your old js file.

It is a good idea to back up everything you have now just in case you flub it by mistake.

After you drop in the new js file, don't forget to change the path of the location in your html.

Savanna Samson said...

You are so nice...

Million thanks!

Viacasa said...

Hy, I have a question. How do i use this script so that when a user clicks an option it will do something. I mean i want to execute a javascript function when a user or visitor selects the option from the drop down list. How can this be accomplished ?

Максим said...

Hey there!

That's a nice tool, thank you for it, but I got a one problem. If I change doctype to 'html strict' or 'xhtml strict/transitional', this demo doesn't work at all anymore in Firefox only(!). It seems strange to me, 'cause in all others browser demo works fine with these doctypes. Can you say, what is the matter?

Thanks in advance.

Anonymous said...


I want to use that selectbox on my form but couldnt see any examples or usage for it when i post the form its not passing these selected values.