Cultivate Web Design Melbourne – Development Blog

window.addEvent('domready',function(){
	$$('input[name=Enquiry_type]').addEvent('change',function()
	{	var Enquiry_Categories = [['option 1','option 2','option 3'],['option 4','option 5','option 6'],['option 7','option 8','option 9']];

		$('Enquiry_Sub_Category').empty();

		for(i=0; i<Enquiry_Categories[$(this).get('value')].length; i++)
		{	var option = Enquiry_Categories[$(this).get('value')][i];
			$('Enquiry_Sub_Category').grab(new Element('option',{value: option, html: option}));
		}
	});
});

<!-- when this is selected-->
<select name="Enquiry_type">
<option value="0">select this for options 1,2,3</option>
<option value="1">select this for options 4,5,6</option>
<option value="2">select this for options 7,8,9</option>
</select>

<!--this will get populated-->
<select name="Enquiry_Sub_Category">
</select>

'option 1','option 1',

OffsetHeight property returns the elements real width including borders, margin and padding.
This is a IE introduced property not in w3c but now implemented in almost all browsers. Maybe we should try using mootools new get calculated width/height?

We combined this with phatfusions validate to only validate visible fields on forms.

Element.implement(
{	isHidden: function()
{	var w = this.offsetWidth, h = this.offsetHeight,
force = (this.tagName === 'TR');
return (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : this.getStyle('display') === 'none';
},

isVisible: function()
{	return !this.isHidden();
}
});