This Javascript question but it is combined with the use of PHP. The PHP code is purely for database access and is not what I'm worried about in this question.
I have a table created with the following structure...
CREATE TABLE regions (
location varchar(50),
country varchar(20),
province varchar(20),
region varchar(20)
);
I would like to have a form with 4 dropdown boxes:
1) Country
2) Province
3) Region
4) Location
I would further like to dynamically update these boxes in the following way:
If a country is selected then the provinces for that country is loaded in the province box.
If a province is selected then the regions for that province is loaded in the regions box
If a region is selected then the location for that region is loaded in the locations box
If managed to make use of Java script code I've found to do just this for the country and the province boxes.
Question is..
How do I do this for all 4 boxes? I will give 250 points for source code that I have to make minimal changes to. I will also supply a SQL dump table to allow you to create the table populated with data if you email me jvrensgg@telkom.co.za
Here is the Java script source code that I got working in my PHP3 file.
<%
//Table: REGIONS
//FIELDS: COUNTRY, REGION, PROVINCE, LOCATION
%>
<html>
<head><script language="JavaScript"><!--
var returnCode = 0;
var errorDesc = "";
var selectArr = new Array();
function sel(value, text) {
this.text = text;
this.value = value;
this.children = new Array();
}
function opt(value, text) {
this.text = text;
this.value = value;
}
function addCountryParent(value, text) {
var newPos = selectArr.length;
selectArr[newPos] = new sel(value, text);
return newPos;
}
function getCountryParentPosition(v
alue) {
for (var i in selectArr) {
if (selectArr[i].value == value) {
return i;
break;
}
}
return -1;
}
function addProvince(parentValue, value, text) {
var parentPos = getCountryParentPosition(p
arentValue
);
if (parentPos == -1) {
returnCode = -1;
errorDesc = "Problem with data, no parent";
} else {
selectArr[parentPos].child
ren[select
Arr[parent
Pos].child
ren.length
] = new opt(value, text);
}
}
function drawCountrySelect() {
var selectObj = document.myForm.select1;
if (document.layers) {
selectObj.options.length = 0;
} else {
selectObj.innerHTML = "";
}
for (var i in selectArr) {
selectObj.options[selectOb
j.options.
length] = new Option(selectArr[i].text,s
electArr[i
].value);
}
selectObj.selectedIndex = 0;
}
function drawProvinceSelect() {
var currentSelect = document.myForm.select1.se
lectedInde
x;
var selectObj = document.myForm.select2;
if (document.layers) {
selectObj.options.length = 0;
} else {
selectObj.innerHTML = "";
}
for (var i in selectArr[currentSelect].c
hildren) {
selectObj.options[selectOb
j.options.
length] = new Option(selectArr[currentSe
lect].chil
dren[i].te
xt,selectA
rr[current
Select].ch
ildren[i].
value);
}
selectObj.selectedIndex = 0;
}
function init() {
if (returnCode == 0) {
drawCountrySelect();
drawProvinceSelect();
} else {
alert(returnCode+":"+error
Desc);
}
}
<%
//************************
**********
**********
**********
**********
**
//initialize database info
//************************
**********
**********
**********
**********
**
require("phpoptions.inc");
$db = mysql_connect($server,$uid
,$pwd);
mysql_select_db($dbname,$d
b);
$result = mysql_query("select distinct province from regions order by province",$db);
while ($myrow = mysql_fetch_array($result)
) {
echo "addCountryParent(\"$myrow
[province]
\",\"$myro
w[province
]\");\n";
}
$result = mysql_query("select distinct province, region from regions order by region",$db);
while ($myrow = mysql_fetch_array($result)
) {
echo "addProvince(\"$myrow[prov
ince]\",\"
$myrow[reg
ion]\",\"$
myrow[regi
on]\");\n"
;
}
%>
// --></script>
<title></title>
</head>
<body onLoad="init()">
<form name="myForm">
<p><select name="select1" onChange="drawProvinceSele
ct()" size="1">
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
</select> </p>
<p><select name="select2" size="1">
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
</select> </p>
</form>
</body>
</html>
