Link select elements dynamically with cvLinkSelect

If you’re making a form with today’s standards you often have to make several select elements with the options of the next select elements referring to the previous one. It’s a simple task to create a small Mootool which do it for you but it’s always a time consuming process, especially if you’ll have a lot of select boxes. I thought that if I have use this functionality more than once a class would be helpful.

This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded. Simple as that.

The html

Note that only the first select element has some options in it. These can be static html or generated by php.

    	-- Select the category --
    	Car
        Bicycle


	-- Select the type --


	-- Select the function --

The css

These css is only for the style of the form elements. Nothing special.

Do you need a neat little loading gif? Just go to Ajaxload and download your own!

.loading{
	background: url(images/loading.gif) 170px center no-repeat;
	}

.inputbox {
	width: 220px;
	padding: 5px;
	border:1px solid #EEE;
	font: 12px "Courier New", Courier, monospace;
	color: #333;
	}

select.inputbox {
	width: 232px;
	}

The javascript

This is where the magic happens. Two variables are very important to make this class work.

• value: This is the name of the object that is the value in the future option element
• option: This is the name of the object that is the visual value of in the option element

window.addEvent('domready', function() {
	var l = new cvLinkSelect({
        select_class: '.linked', //the class for the linked select boxes
		url: 'yourajaxurl.php', //pad to ajax file
		multiple_var: true, //use multiple get variables or only one
		loadClass: 'loading', //the css class that is added when a request is made
		isLast: function(){
			alert('Last dynamic selectbox!');
		},
		hasnoSub: function(){
			alert('This option has no depending options. Lets hide the next elements!');

			l.select.each(function(s){
				if(l.select.indexOf(s) >= l.select.indexOf(l.current)){ //if the select depends on the parent
					s.hide();
				}
			});
		},
		hasSub: function(){
			l.select.each(function(s){
				if(l.select.indexOf(s) >= l.select.indexOf(l.current)){ //if the select depends on the parent
					s.show();
				}
			});
		}
	});
});

The JSON format

You have to make sure that the AJAX request returns a JSON format that is formatted like the example below.

NOTE
Be sure that the json always contains a value and a html object. See the demo for a example.

[{"value":"wheels","html":"Wheels"},
{"value":"body","html":"Body"},
{"value":"exaust","html":"Exaust"}]

The php

The php file has to return a json formatted string depending on the selected value. This is also a very static example but this illustrates how it should work.

/* First of all you have to define the arrays and fill them. The last part is up to you! */
$categories = array();
$types = array();

if(isset($_GET['category'])){
	json_encode($categories[$_GET['category']]);
}elseif(isset($_GET['type'])){
	json_encode($types[$_GET['type']]);
}

I hope you enjoy this class and if you have any questions or suggestions; please leave a comment!

Multiple GET variables

In the old version we had only request with this kind of urls:

ajax.php?category=var

But in my opinion this wasn’t sufficient for the main goal: Get the right data in the select boxes and make programming easier. So that’s why I’ve made an update to the class so you can get this kind of requests:

ajax.php?category=var&type=var2

These urls can be activated via the multiple_var option in the class. Before you use them: please make sure that your php script has the correct architecture. A very basic example:

if(!empty($_GET['category'])){
	if($_GET['category'] == 'car'){
		if(!empty($_GET['type'])){
			if($_GET['type'] == 'wheels'){
				/* return the wheels array */
			}
		}else{
			/* return the car array */
		}
	}
}

Changelog

• V1.2 – 26 nov 2009
  • Maintain an empty element with a short discription and an empty value in your html page and the class will  not remove this one while you change the parent select box
  • Set the value of the first select box to the empty option after page reload
  • Comments added for developers and curious people
  • Updated the example
  • Removed some overhead in the class
• V1.1 – 2 nov 2009
  • Multiple GET variables in the request url.
  • If the request is empty it’s the last item in the linked selectboxes range. In this case we have to fire the isLast function.
• V1.0 – 1 nov 2009
  • First release of the link select class