Changes

• 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

Go the the original page of the cvLinkSelect class!

View example Download file

Changes

• Multiple GET variables in the request url.
• After a page refresh the script checks if the first linked selectbox option is not empty. If it isn’t empty the first request fires.
• 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.

Read more about the usage on the original post for the cvLinkSelect class!

Enjoy!

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.

View example Download file Download Zip

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. You can use if-statements or use a switch method to print the exact output but the basics are just this:

if(isset($_GET['category'])){
	echo '[{"value":"wheels","html":"Wheels"},{"value":"body","html":"Body"}]';
}elseif(isset($_GET['type'])){
	echo '[{"value":15,"html":"15 inch"},{"value":17,"html":"17 inch"}]';
}

When your website is dynamic you probably prefer to use a flexible way of presenting the JSON variable. Read more about this in another article I’ve wrote. I think it’s very useful so read it and don’t reinvent the wheel.

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 JSON variabele */
			}
		}else{
			/* return the car JSON variable */
		}
	}
}

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

Changelog

• v1.4 30 mrt 2010
  • Fixed the weird Elements bug in Mootools 1.2.4
  • Upgraded the speed with document.createDocumentFragment()
• V1.3 26 feb 2010
  • It’s possible to disable the select elements when no options are available. This is great feedback
• V1.2.2 – 21 feb 2010
  • Fixed the reset bug. It will be resetting all the select elements if an empty value is set.
• V1.2.1 – 20 feb 2010
  • Reset the depending select elements if when a user changes the upper select element
• 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

So I decided to write my own Eyedropper. Test it and install it on your own website! You can tweak some events so it has more functionality.

There is also a Zip file available with a working example. Just upload the files to your folder on your webspace and navigate to it!

Example Download Class Download Zip

File structure

The following structure is used in the example and the documentation.

• images
  • your_image.jpg
• js
  • cvMooDrop.js
  • mootools-1.2.js
• ajax_moodrop.php
• basic.css
• cvMooDrop.css
• index.php /*This file contains the html for the eyedropper*/
• moodrop.php

The html

The html is really simple. The path to the image is the relative path.

The css

#dropperid {
	float: left;
	padding: 0px;
	width: 551px; //the width of the image
	height: 157px; //the height of the image
	}

#prev {
	float: left;
	width: 80px;
	height: 80px;
	border: 1px #CCC solid;
	}

The basic javascript

window.addEvent('domready', function() {
	var test1 = new moodrop('dropperid',{
		url: 'ajax_moodrop.php',
		prev_id: 'prev'
	});
});

The more advanced javascript

window.addEvent('domready', function() {
	var test2 = new moodrop('dropperadvanced',{
		url: 'ajax_moodrop.php',
		prev_id: 'prev2',
	});

	var colors = [];

	var addColor = function(c){
		if(colors.contains(c)){
			alert('This color already exists!');
		}else{
			colors.push(c);
			$('colors_field').value = JSON.encode(colors);
			createColor(c);
		}
	}

	var createColor = function(c){
		var box = new Element('span',{	'id': this.hex,
							  			'class': 'box',
										'styles': {
											'background': c,
											'display': 'block',
											'float': 'left',
											'cursor': 'pointer'
											}
										}).inject($('scheme'));
	};

	$('add').addEvent('click',function(a){
		addColor(test2.hex);
	});
});

The php (ajax_moodrop.php)

The AJAX request has several variables in it to get the right pixel, the pixel the dropper is pointing at.

• image: the relative path to the image file
• n: the relative top position of the pixel
• w: the relative left position of the pixel

if(isset($_GET['image'])){
	/* select the left lower pixel from the dropperdiv and get the color index */
	$im = imagecreatefromjpeg($_GET['image']);
	$color_index = imagecolorat($im, $_GET['w'], $_GET['n']);

	/* get rid of the temporary image and display the human readable hex color */
	echo '#'.dechex($color_index);
}

The function imagecreatefrom* can be changed to several functions, depending on the image type you use. In this case I’ve used a very simple static solution but you can select the correct function by checking the mime type.

• imagecreatefromjpeg
• imagecreatefromgif
• imagecreatefrompng