Hi, guys:
I have written a piece of code which utilizes Javascript in PHP to create a three level dynamic list box(Country, States/Province, Market). However, I have encountered a strange problem, and I have spent three days trying to debug but to no avail.
Everything is OK when there are only two dependent list boxes, but when adding the third child list box, a problem appears: if I populate the third box only with the value: new Option("marketID"), everything works fine; if I populate the third list box with text: new Option("marketName") or text+value: new Option("marketID", "marketName"), all three list box stop responding to events(onChange).
What is going on? Any suggestions welcome! Thanks a lot.
Here is the PHP function to create the 3 level listbox (please disregard the three $sel....... parameters for now, they are suppose to be defaults):
Quote:
function Three_Select($country, $province, $market, $selCountry,$selProvince, $selMarket, $result)
{
$sJavaScript='countryselected';
$mJavaScript='regionselected';
$tJavaScript=$mJavaScript;
//Country select box
echo "<TD><SELECT NAME='".$country."' SIZE=\"1\" onChange='".$sJavaScript."(this)' >\n";
//function that populates the province select box
$sJavaScript ="function ".$sJavaScript."(elem){\n ".$test1."for \n (var i = document.myform.".$province.".options.length; i >= 0; i--)
{\n document.myform.".$province.".options[i] = null;\n";
//function that populates the market select box
$mJavaScript ="function ".$mJavaScript."(elem){\n ".$test2."for (var i = document.myform.".$market.".options.length; i >= 0; i--)
{\n document.myform.".$market.".options[i] = null;\n";
$sLastCountry="";
$sLastRegion="";
while ( $row = mysqli_fetch_array($result, MYSQLI_ASSOC) )
{
// is this a new country?
If ($sLastCountry!=$row["CountryName"])
{
// if yes, add the entry to the country's listbox
$sLastCountry = $row["CountryName"];
//if edit data then pre-select country
if($selCountry==$sLastCountry)
{
echo "\n<OPTION SELECTED value='".$row["CountryID"]."'>".$selCountry."</OPTION>";
}
else
echo "\n<OPTION value='".$row["CountryID"]."'>".$sLastCountry."</OPTION>";
// and add a new section to the javascript...
$sJavaScript = $sJavaScript."}\n"."if (elem.value=="
.$row["CountryID"]."){\n";
}
if($sLastRegion!=$row["RegionName"])
{
$sLastRegion = $row["RegionName"];
// and add a new region line to the javascript
$sJavaScript = $sJavaScript."document.myform.".$province.".
options[document.myform.".$province.".options.length]
= new Option('".$row["RegionName"]."', '".$row["RegionID"]."');\n";
$mJavaScript=$mJavaScript."}\n"."if (elem.value=="
.$row["RegionID"]."){\n";
}
/****************************** here is the problematic code ****************/
// and add a new region line to the javascript
$mJavaScript = $mJavaScript."document.myform.".$market.".
options[document.myform.".$market.".options.length]
new Option('".$row["marketName"]."', '".$row["marketID"]."');\n";
/****************************** here is the problematic code ****************/
// $mJavaScript = $mJavaScript."alert('elem value: ' + elem.value + 'function regionselected');\n";
}
// finish the country's listbox; if edit data then pre-select region
if($selProvince!= '')
{
echo "</SELECT></TD>";
echo "<TD><SELECT NAME='".$province."' SIZE=1 onChange='".$tJavaScript."(this)'>\n";
echo "<OPTION SELECTED>".$selProvince."</OPTION>";
echo "</SELECT></TD>";
}
else
{
echo "</SELECT></TD>";
echo "<TD><SELECT NAME='".$province."' SIZE=1 onChange='".$tJavaScript."(this)'>\n";
echo "<OPTION>-- Choose --</OPTION>";
echo "</SELECT></TD>";
}
// finish the country's listbox; if edit data then pre-select region
if($selMarket!= '')
{
echo "<TD colspan='3'><SELECT NAME='".$market."' SIZE=1>";
echo "<OPTION SELECTED>".$selMarket."</OPTION>";
echo "</SELECT></TD>";
}
else
{
echo "<TD colspan='3'><SELECT NAME='".$market."' SIZE=1>";
echo "<OPTION>-- Choose --</OPTION>";
echo "</SELECT></TD>";
}
$sJavaScript = $sJavaScript."\n}\n}\n";
$mJavaScript = $mJavaScript."\n}\n}\n";
echo "\n<SCRIPT LANGUAGE=\"JavaScript\">";
echo "\n".$sJavaScript."\n".$mJavaScript."\n</SCRIPT>\n";
}
The $result is coming from this sql:
Quote:
//get coutry and region information, for creating list boxes
$sql="SELECT c.CountryName,c.CountryID, r.RegionName, r.RegionID, t.marketID, t.marketName
FROM country as c, region as r, market_tv as t, market_tv_map as m
WHERE r.CountryID=c.CountryID
and r.RegionID=m.regionID
and m.marketID=t.marketID
order by c.CountryID, r.RegionID, t.marketName";
$result = safe_query($link, $sql);
this is the displayed web page source file with both "marketID" and "marketName". All three list boxes do not respond to "onChange" or "onClick" events.
Quote:
</table><table class="frm2"><tr><td class="lead">*Service Region:</td><TD><SELECT NAME='CountryA' SIZE="1" onChange='countryselected(this)' >
<OPTION value='1'>Canada</OPTION>
<OPTION value='2'>United States</OPTION></SELECT></TD><TD><SELECT NAME='ProvinceA' SIZE=1 onChange='regionselected(this)'>
<OPTION>-- Choose --</OPTION></SELECT></TD><TD colspan='3'><SELECT NAME='MarketA' SIZE=1><OPTION>-- Choose --</OPTION></SELECT></TD>
<SCRIPT LANGUAGE="JavaScript">
function countryselected(elem){
for
(var i = document.myform.ProvinceA.options.length; i >= 0; i--)
{
document.myform.ProvinceA.options[i] = null;
}
if (elem.value==1){
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('National', '1');
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('Alberta', '2');
...........................
cut away some data
...........................
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('Yukon', '14');
}
if (elem.value==2){
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('National', '15');
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('Alabama', '16');
............................
cut away some data
............................
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('Wyoming', '64');
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('New York', '65');
}
}
function regionselected(elem){
for (var i = document.myform.MarketA.options.length; i >= 0; i--)
{
document.myform.MarketA.options[i] = null;
}
if (elem.value==1){
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('National', '1');
}
if (elem.value==2){
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('Calgary Lethbridge', '7');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('Edmonton', '6');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('Lloydminster (AB/SK)', '41');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('Medicine Hat', '40');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('Red Deer', '28');
}
...............................
cut away some data
...............................
if (elem.value==65){
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('Casper', '246');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('Cheyenne', '244');
}
}
</SCRIPT>
This is the web page source file with only "marketID" in new Option(). All three list boxes respond to "onChange" and "onClick" events:
Quote:
</table><table class="frm2"><tr><td class="lead">*Service Region:</td><TD><SELECT NAME='CountryA' SIZE="1" onChange='countryselected(this)' >
<OPTION value='1'>Canada</OPTION>
<OPTION value='2'>United States</OPTION></SELECT></TD><TD><SELECT NAME='ProvinceA' SIZE=1 onChange='regionselected(this)'>
<OPTION>-- Choose --</OPTION></SELECT></TD><TD colspan='3'><SELECT NAME='MarketA' SIZE=1><OPTION>-- Choose --</OPTION></SELECT></TD>
<SCRIPT LANGUAGE="JavaScript">
function countryselected(elem){
for
(var i = document.myform.ProvinceA.options.length; i >= 0; i--)
{
document.myform.ProvinceA.options[i] = null;
}
if (elem.value==1){
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('National', '1');
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('Alberta', '2');
..................................
cut away some data
..................................
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('Yukon', '14');
}
if (elem.value==2){
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('National', '15');
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('Alabama', '16');
.........................................
cut away some data
........................................
document.myform.ProvinceA.
options[document.myform.ProvinceA.options.length]
= new Option('New York', '65');
}
}
function regionselected(elem){
for (var i = document.myform.MarketA.options.length; i >= 0; i--)
{
document.myform.MarketA.options[i] = null;
}
if (elem.value==1){
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('1');
}
if (elem.value==2){
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('7');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('6');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('41');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('40');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('28');
}
........................................
cut away some data
........................................
if (elem.value==65){
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('246');
document.myform.MarketA.
options[document.myform.MarketA.options.length]
= new Option('244');
}
}
</SCRIPT>
Please help!!
