hello,
i am trying to build a dynamic drop down menu selector, that will load all the data from a database i have.
an example of the script, i am so far using is <!-- m --><a class="postlink" href="http://javascript.internet.com/forms/country.html#source">http://javascript.internet.com/forms/co ... tml#source</a><!-- m -->
now, i have, this working quite nicely using two drop down lists, but i need to fill in a third drop down list from the data generated in the second drop down list.
for example, i have a region, county, town -- when a user select region, the array loads the data for the county and then the user selects the county and this in turn filters the towns associated with that perticular region?!?!
any help will be much appreciated.
this is what i have so far, please see, attached file region_county.txt
or
<td>
<script language="javascript"><!--
function comboItemSelected(oList1,oList2){
if (oList2!=null){
clearComboOrList(oList2);
if (oList1.selectedIndex == -1){
oList2.options[oList2.options.length] = new Option('Please make a selection from the list', '');
} else {
fillCombobox(oList2, oList1.name + '=' + oList1.options[oList1.selectedIndex].value);
}
}
}
function listboxItemSelected(oList1,oList2){
if (oList2!=null){
clearComboOrList(oList2);
if (oList1.selectedIndex == -1){
oList2.options[oList2.options.length] = new Option('Please make a selection from the list', '');
} else {
fillListbox(oList2, oList1.name + '=' + oList1.options[oList1.selectedIndex].value);
}
}
}
function clearComboOrList(oList){
for (var i = oList.options.length - 1; i >= 0; i--){
oList.options = null;
}
oList.selectedIndex = -1;
if (oList.onchange) oList.onchange();
}
function fillCombobox(oList, vValue){
if (vValue != '') {
if (assocArray[vValue]){
oList.options[0] = new Option('Please make a selection', '');
var arrX = assocArray[vValue];
for (var i = 0; i < arrX.length; i = i + 2){
if (arrX != 'EOF') oList.options[oList.options.length] = new Option(arrX[i + 1], arrX);
}
if (oList.options.length == 1){
oList.selectedIndex=0;
if (oList.onchange) oList.onchange();
}
} else {
oList.options[0] = new Option('None found', '');
}
}
}
function fillListbox(oList, vValue){
if (vValue != '') {
if (assocArray[vValue]){
var arrX = assocArray[vValue];
for (var i = 0; i < arrX.length; i = i + 2){
if (arrX != 'EOF') oList.options[oList.options.length] = new Option(arrX[i + 1], arrX);
}
if (oList.options.length == 1){
oList.selectedIndex=0;
if (oList.onchange) oList.onchange();
}
} else {
oList.options[0] = new Option('You need a valid selection!', '');
}
}
}
//--></script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (!assocArray) var assocArray = new Object();
assocArray["region_list1=2"] = new Array(
"2","Cambridgeshire",
"3","Norfolk",
"4","Suffolk",
"EOF");
assocArray["region_list1=3"] = new Array(
"5","Derbyshire",
"6","Leicestershire",
"7","Lincolnshire",
"8","Northamptonshire",
"9","Nottinghamshire",
"EOF");
assocArray["region_list1=4"] = new Array(
"10","London EC DO",
"11","London East DO",
"12","London North DO",
"13","London NW DO",
"14","London Paddington",
"15","London SE DO",
"16","London SW1",
"17","London WC DO",
"EOF");
assocArray["region_list1=5"] = new Array(
"18","Hereford & Worcester",
"19","Salop",
"20","Staffordshire",
"21","Warwickshire",
"22","West Midlands",
"EOF");
assocArray["region_list1=6"] = new Array(
"23","Cheshire",
"24","Isle of Man",
"25","Lancashire",
"26","Merseyside",
"EOF");
assocArray["region_list1=7"] = new Array(
"27","Cleveland",
"28","Cumbria",
"29","Durham",
"30","Northumberland",
"31","Tyne & Wear",
"EOF");
assocArray["region_list1=8"] = new Array(
"32","Antrim",
"33","Armagh",
"34","Down",
"35","Fermanagh",
"36","Londonderry",
"37","Tyrone",
"EOF");
assocArray["region_list1=9"] = new Array(
"38","Borders",
"39","Central",
"40","Dumfries & Gallowa",
"41","Fife",
"42","Grampian",
"43","Highland",
"44","Lothians",
"45","Strathclyde",
"46","Tayside",
"EOF");
assocArray["region_list1=10"] = new Array(
"47","Bedfordshire",
"48","Berkshire",
"49","Buckinghamshire",
"50","East Sussex",
"51","Essex",
"52","Hampshire",
"53","Hertfordshire",
"54","Isle of Wight",
"55","Kent",
"56","Middlesex",
"57","Oxfordshire",
"58","Surrey",
"59","West Sussex",
"EOF");
assocArray["region_list1=11"] = new Array(
"60","Avon",
"61","Channel Islands",
"62","Cornwall",
"63","Devon",
"64","Dorset",
"65","Gloucestershire",
"66","Isles of Scilly",
"67","Somerset",
"68","Wiltshire",
"EOF");
assocArray["region_list1=12"] = new Array(
"69","Clywd",
"70","Dyfed",
"71","Gwent",
"72","Gwynedd",
"73","Mid Glamorgan",
"74","Powys",
"75","South Glamorgan",
"76","West Glamorgan",
"EOF");
assocArray["region_list1=13"] = new Array(
"77","Humberside",
"78","North Yorkshire",
"79","South Yorkshire",
"80","West Yorkshire",
"EOF");
-->
</script>
<form>
<select name='region_list1' class="input" onchange='listboxItemSelected(this,this.form.county_list);'>
<option>Please select a region</option>
<Option value=http://www.webdeveloper.com/forum/archive/index.php/"2">
East Anglia</Option><Option value="3">
East Midlands</Option><Option value="4">
London</Option><Option value="5">
Midland</Option><Option value="6">
North West</Option><Option value="7">
Northern</Option><Option value="8">
Northern Ireland</Option><Option value="9">
Scotland</Option><Option value="10">
South East</Option><Option value="11">
South West</Option><Option value="12">
Wales</Option><Option value="13">
Yorkshire & Humberside</Option>
</select>
</td>
<td>
<font color="#666666" size=1 face=Verdana, Arial, Helvetica, sans-serif>
County
</font>
</td>
<td>
<select name='county_list' class="input">
<option><<--- make a selection</option></select>
</td>
i am trying to build a dynamic drop down menu selector, that will load all the data from a database i have.
an example of the script, i am so far using is <!-- m --><a class="postlink" href="http://javascript.internet.com/forms/country.html#source">http://javascript.internet.com/forms/co ... tml#source</a><!-- m -->
now, i have, this working quite nicely using two drop down lists, but i need to fill in a third drop down list from the data generated in the second drop down list.
for example, i have a region, county, town -- when a user select region, the array loads the data for the county and then the user selects the county and this in turn filters the towns associated with that perticular region?!?!
any help will be much appreciated.
this is what i have so far, please see, attached file region_county.txt
or
<td>
<script language="javascript"><!--
function comboItemSelected(oList1,oList2){
if (oList2!=null){
clearComboOrList(oList2);
if (oList1.selectedIndex == -1){
oList2.options[oList2.options.length] = new Option('Please make a selection from the list', '');
} else {
fillCombobox(oList2, oList1.name + '=' + oList1.options[oList1.selectedIndex].value);
}
}
}
function listboxItemSelected(oList1,oList2){
if (oList2!=null){
clearComboOrList(oList2);
if (oList1.selectedIndex == -1){
oList2.options[oList2.options.length] = new Option('Please make a selection from the list', '');
} else {
fillListbox(oList2, oList1.name + '=' + oList1.options[oList1.selectedIndex].value);
}
}
}
function clearComboOrList(oList){
for (var i = oList.options.length - 1; i >= 0; i--){
oList.options = null;
}
oList.selectedIndex = -1;
if (oList.onchange) oList.onchange();
}
function fillCombobox(oList, vValue){
if (vValue != '') {
if (assocArray[vValue]){
oList.options[0] = new Option('Please make a selection', '');
var arrX = assocArray[vValue];
for (var i = 0; i < arrX.length; i = i + 2){
if (arrX != 'EOF') oList.options[oList.options.length] = new Option(arrX[i + 1], arrX);
}
if (oList.options.length == 1){
oList.selectedIndex=0;
if (oList.onchange) oList.onchange();
}
} else {
oList.options[0] = new Option('None found', '');
}
}
}
function fillListbox(oList, vValue){
if (vValue != '') {
if (assocArray[vValue]){
var arrX = assocArray[vValue];
for (var i = 0; i < arrX.length; i = i + 2){
if (arrX != 'EOF') oList.options[oList.options.length] = new Option(arrX[i + 1], arrX);
}
if (oList.options.length == 1){
oList.selectedIndex=0;
if (oList.onchange) oList.onchange();
}
} else {
oList.options[0] = new Option('You need a valid selection!', '');
}
}
}
//--></script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (!assocArray) var assocArray = new Object();
assocArray["region_list1=2"] = new Array(
"2","Cambridgeshire",
"3","Norfolk",
"4","Suffolk",
"EOF");
assocArray["region_list1=3"] = new Array(
"5","Derbyshire",
"6","Leicestershire",
"7","Lincolnshire",
"8","Northamptonshire",
"9","Nottinghamshire",
"EOF");
assocArray["region_list1=4"] = new Array(
"10","London EC DO",
"11","London East DO",
"12","London North DO",
"13","London NW DO",
"14","London Paddington",
"15","London SE DO",
"16","London SW1",
"17","London WC DO",
"EOF");
assocArray["region_list1=5"] = new Array(
"18","Hereford & Worcester",
"19","Salop",
"20","Staffordshire",
"21","Warwickshire",
"22","West Midlands",
"EOF");
assocArray["region_list1=6"] = new Array(
"23","Cheshire",
"24","Isle of Man",
"25","Lancashire",
"26","Merseyside",
"EOF");
assocArray["region_list1=7"] = new Array(
"27","Cleveland",
"28","Cumbria",
"29","Durham",
"30","Northumberland",
"31","Tyne & Wear",
"EOF");
assocArray["region_list1=8"] = new Array(
"32","Antrim",
"33","Armagh",
"34","Down",
"35","Fermanagh",
"36","Londonderry",
"37","Tyrone",
"EOF");
assocArray["region_list1=9"] = new Array(
"38","Borders",
"39","Central",
"40","Dumfries & Gallowa",
"41","Fife",
"42","Grampian",
"43","Highland",
"44","Lothians",
"45","Strathclyde",
"46","Tayside",
"EOF");
assocArray["region_list1=10"] = new Array(
"47","Bedfordshire",
"48","Berkshire",
"49","Buckinghamshire",
"50","East Sussex",
"51","Essex",
"52","Hampshire",
"53","Hertfordshire",
"54","Isle of Wight",
"55","Kent",
"56","Middlesex",
"57","Oxfordshire",
"58","Surrey",
"59","West Sussex",
"EOF");
assocArray["region_list1=11"] = new Array(
"60","Avon",
"61","Channel Islands",
"62","Cornwall",
"63","Devon",
"64","Dorset",
"65","Gloucestershire",
"66","Isles of Scilly",
"67","Somerset",
"68","Wiltshire",
"EOF");
assocArray["region_list1=12"] = new Array(
"69","Clywd",
"70","Dyfed",
"71","Gwent",
"72","Gwynedd",
"73","Mid Glamorgan",
"74","Powys",
"75","South Glamorgan",
"76","West Glamorgan",
"EOF");
assocArray["region_list1=13"] = new Array(
"77","Humberside",
"78","North Yorkshire",
"79","South Yorkshire",
"80","West Yorkshire",
"EOF");
-->
</script>
<form>
<select name='region_list1' class="input" onchange='listboxItemSelected(this,this.form.county_list);'>
<option>Please select a region</option>
<Option value=http://www.webdeveloper.com/forum/archive/index.php/"2">
East Anglia</Option><Option value="3">
East Midlands</Option><Option value="4">
London</Option><Option value="5">
Midland</Option><Option value="6">
North West</Option><Option value="7">
Northern</Option><Option value="8">
Northern Ireland</Option><Option value="9">
Scotland</Option><Option value="10">
South East</Option><Option value="11">
South West</Option><Option value="12">
Wales</Option><Option value="13">
Yorkshire & Humberside</Option>
</select>
</td>
<td>
<font color="#666666" size=1 face=Verdana, Arial, Helvetica, sans-serif>
County
</font>
</td>
<td>
<select name='county_list' class="input">
<option><<--- make a selection</option></select>
</td>