twitter facebook dribbble email

Select box replacement

Careful! This post is looking a little old and could be inaccurate in many, many ways

Many form elements can look pretty ugly, and although their consistent look helps identify their purpose to the user it’s also sometimes fun and useful to break the conventions. One element that is hard to change is the select box, mainly due to IE not implementing any CSS for select boxes, yet as the image shows below, I decided to try something a little more radical.

Alternative Select Boxes

What the image shows is a small part of a site that is not yet live, and specifically it shows a select box transformed. Rather than showing a standard select box I foolishly designed a form element that with the aid of two buttons you would move up and down the options incrementally.

Why?

This form is a central element of the design of the site and I wasn’t content in putting in any standard form elements without styling them. The select boxes also only contained 5 or 6 options so were not long lists to move through one by one. So I came up with a solution that would present a set of options most commonly displayed in a select box in a more visually pleasing way.

How?

As the next image shows the form does exist with standard select boxes visible, this is in fact the non JavaScript version of the page. Although I didn’t think so much about the implementation at the design stage I was conscious that the form still work for those without JavaScript when I came to building it.

Alternate Select Boxes

Initially it appeared I’d set myself a rather complex challenge and had considered creating the non JavaScript version in HTML and hiding it with CSS. However I had to ensure that the form submitted both versions of the form via the same select box. This coupled with the fact the options already existed in the select box it seemed wise to create all the alternative select box completely using JavaScript.

In a nutshell the JavaScript collects all the information from the select box and constructs what is visible to the user. When the user then changes the option the now hidden select box also changes so that the visible option is submitted correctly to the form.

Code

So below is the code I’ve built to do all this. I’ve added some comments to ensure it’s easy to understand as I’m sure it’s not the cleanest code known to developer kind. By the way when I said JavaScript I meant JQuery as to me it’s the same thing these days.

The Problem

Currently there is one issue to the function, this being the following line:

Because the JavaScript uses the JQuery function ‘contains’ it would show not only the option ‘1’ if it existed but also any other option with a 1 in it, for example ’10’. I’ve yet to find a workable solution so if you can think of something add a comment below and I’ll give it a go.