Multiple Tier Dynamic Drop-Down List

[SalientAnimal]

Hi All,

 

For the last year or so I have been using the following code for my dynamic mutiple tier drop-down list:

 

 
function listboxchange10(p_index) {

//Clear Current options in Suburb List
document.form1.suburb.length = 0;
document.form1.suburb.options[0] = new Option("","");





switch (p_index) {
//START OF SUBURB SELECTION LIST//
case "Eastern Cape":
document.form1.suburb.options[0] = new Option("","");
document.form1.suburb.options[1] = new Option("Amabhele","Amabhele");
document.form1.suburb.options[2] = new Option("Amacwera","Amacwera");
document.form1.suburb.options[3] = new Option("Amadiba","Amadiba");

break;


case "Free-State":
document.form1.suburb.options[0] = new Option("","");
document.form1.suburb.options[1] = new Option("Baralong Boo Moroka","Baralong Boo Moroka");
document.form1.suburb.options[2] = new Option("Bethlehem","Bethlehem");
document.form1.suburb.options[3] = new Option("Bloemfontein","Bloemfontein");

break;

 

This was the only method at the time that I could find the allowed for more than two fields in the dynamic drop-down. I have used upto 5 dynamic drop-downs. However I now feel that this may have become a little outdated and it doesn't really give a lot of flexability.

 

Problems I have found:

Can't really customize the size of the drop-down boxes - these size dynamically as per the data in the box.

When on tier 2 as an example, and there is no tier 3 option the drop-down menu can't pre-populate a N/A value, thus allowing for a field selection validation.

 

Can anyone suggest a better method to use for a dynamic list?