Problem in creating 3 level dynamic list box in PHP

[skyson2ye]

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):

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:

//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.

</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:

</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!!

[ronverdonk]

This bunch of unstructured code is absolutely unreadable. It makes your chance of it being looked at low.

So please enclose any code within the proper code tags. See the Posting Guidelines on how to do that.

moderator