Unobtrusive dynamic drop down boxes
A couple of days ago I started to build the dynamic product page of an e-commerce store we're building. One of the requirements is to have the product options all available on the same page, which is quite normal, but our drop down boxes need to only be populated with variations of the product that are in stock. For example I didn't want the user to select a Red/Large t-shirt if it's not in stock. I know that this could have been easily achieved with AJAX but at this stage in the development we wanted it to be done client side.
There are hundred's of examples of dynamic drop down boxes but we had another requirement which meant they weren't going to work. When the page is generated we don't know whether the product would have one, two, three or four options to choose from and they all needed to be linked. With all of the examples we came across you could only have two or three drop down boxes and they all used hard coded Arrays, except one.
Here is a working version of the dynamic drop down boxes.
Boring rubbish over with, now the code...
I have tried to make the whole exercise of creating the dynamic drop down boxes really simple and unobtrusive. The current build as been only tested on a PC using IE 6, FF 1.5, Opera 9. Everything below can be found in the zip file. Please let me know if you find any bugs or have suggestions.
Step one the select lists
For this example I will use four select lists. We have had it working two, three and five, so there is no reason why you couldn't have more if required.
Four select lists
<label>
Element 1:
<select id="select[1]" name="element[1]">
<option class="1">1</option>
<option class="2">2</option>
</select>
</label>
<label>
Element 2:
<select id="select[2]" name="element[2]">
<option class="1.1">1.1</option>
<option class="1.2">1.2</option>
<option class="2.1">2.1</option>
<option class="2.2">2.2</option>
</select>
</label>
<label>
Element 3:
<select id="select[3]" name="element[3]">
<option class="1.1.1">1.1.1</option>
<option class="1.1.2">1.1.2</option>
<option class="1.2.1">1.2.1</option>
<option class="1.2.2">1.2.2</option>
<option class="2.1.1">2.1.1</option>
<option class="2.1.2">2.1.2</option>
<option class="2.2.1">2.2.1</option>
<option class="2.2.2">2.2.2</option>
</select>
</label>
<label>
Element 4:
<select id="select[4]" name="element[4]">
<option class="1.1.1.1">1.1.1.1</option>
<option class="1.1.1.2">1.1.1.2</option>
<option class="1.1.2.1">1.1.2.1</option>
<option class="1.1.2.2">1.1.2.2</option>
<option class="1.2.1.1">1.2.1.1</option>
<option class="1.2.1.2">1.2.1.2</option>
<option class="1.2.2.1">1.2.2.1</option>
<option class="1.2.2.2">1.2.2.2</option>
<option class="2.1.1.1">2.1.1.1</option>
<option class="2.1.1.2">2.1.1.2</option>
<option class="2.1.2.1">2.1.2.1</option>
<option class="2.1.2.2">2.1.2.2</option>
<option class="2.2.1.1">2.2.1.1</option>
<option class="2.2.1.2">2.2.1.2</option>
<option class="2.2.2.1">2.2.2.1</option>
<option class="2.2.2.2">2.2.2.2</option>
</select>
</label>
Step two the JavaScript file
Reference the JavaScript file, which is in the downloadable zip. Add this line to your page in between your head tags. The code isn't Object Orientated yet. I am working on it but I've had a problem with the element's scope with firing the onchange event.
Add javascript file to head of page
<script type="text/javascript" src="unobtrustive-select-lists.js"></script>
Step three the JavaScript initialization function
Then we need to add the initialization code, this is used to set-up our drop down boxes. The whole process only publicly uses one function 'initMultiSelect(options)'. This function has one parameter called options, which contains all the necessary to get going.
- elements (string Array) - the element ids for all your drop down boxes you wish to use. They must be in order of sequence.
- noOptionsMessage (string) - the message you want to display if no options are available.
- pleaseSelectMessage (string) - the please select message to be used.
Initialization code
<script type="text/javascript">
function init() {
initMultiSelect({elements:['select[1]','select[2]','select[3]','select[4]'], noOptionsMessage:'No options available...', pleaseSelectMessage:'<< Please select...'});
}
</script>
Finally call the initialization function
For the demo I will fire it using the body's onload call.
A not very unobtrusive event assignment
<body onload="init();">
.....
</body>
Reference for the code I wrote
As you can see from the above and by digging in the JavaScript source code file the whole operation works by the class attribute's value. When I was researching dynamic drop down boxes I came across an article on the personal blog of Bobby van der Sluis. The article offers some great examples and the article is very well written, but it just didn't tick all my boxes, no pun intended!
Downloadable zip file
Anyway back to work, let me know what you think.
You can leave your own comment below.