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("marketI D"), everything works fine; if I populate the third list box with text: new Option("marketN ame") or text+value: new Option("marketI D", "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($c ountry, $province, $market, $selCountry,$se lProvince, $selMarket, $result)
{
$sJavaScript='c ountryselected' ;
$mJavaScript='r egionselected';
$tJavaScript=$m JavaScript;

//Country select box
echo "<TD><SELEC T NAME='".$countr y."' SIZE=\"1\" onChange='".$sJ avaScript."(thi s)' >\n";

//function that populates the province select box
$sJavaScript ="function ".$sJavaScript. "(elem){\n ".$test1."f or \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."f or (var i = document.myform .".$market.".op tions.length; i >= 0; i--)
{\n document.myform .".$market.".op tions[i] = null;\n";

$sLastCountry=" ";
$sLastRegion="" ;

while ( $row = mysqli_fetch_ar ray($result, MYSQLI_ASSOC) )
{
// is this a new country?
If ($sLastCountry! =$row["CountryNam e"])
{

// if yes, add the entry to the country's listbox
$sLastCountry = $row["CountryNam e"];
//if edit data then pre-select country
if($selCountry= =$sLastCountry)
{
echo "\n<OPTION SELECTED value='".$row["CountryID"]."'>".$selCount ry."</OPTION>";
}
else
echo "\n<OPTION value='".$row["CountryID"]."'>".$sLastCou ntry."</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."d ocument.myform. ".$province .".
options[document.myform .".$province.". options.length]
= new Option('".$row["RegionName "]."', '".$row["RegionID"]."');\n";

$mJavaScript=$m JavaScript."}\n "."if (elem.value=="
.$row["RegionID"]."){\n";
}

/*************** *************** here is the problematic code *************** */
// and add a new region line to the javascript
$mJavaScript = $mJavaScript."d ocument.myform. ".$market." .
options[document.myform .".$market.".op tions.length]
new Option('".$row["marketName "]."', '".$row["marketID"]."');\n";
/*************** *************** here is the problematic code *************** */


// $mJavaScript = $mJavaScript."a lert('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><SELEC T NAME='".$provin ce."' SIZE=1 onChange='".$tJ avaScript."(thi s)'>\n";
echo "<OPTION SELECTED>".$sel Province."</OPTION>";
echo "</SELECT></TD>";
}
else
{
echo "</SELECT></TD>";
echo "<TD><SELEC T NAME='".$provin ce."' SIZE=1 onChange='".$tJ avaScript."(thi s)'>\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'><SE LECT NAME='".$market ."' SIZE=1>";
echo "<OPTION SELECTED>".$sel Market."</OPTION>";
echo "</SELECT></TD>";
}
else
{
echo "<TD colspan='3'><SE LECT 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=\"Java Script\">";
echo "\n".$sJavaScri pt."\n".$mJavaS cript."\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.C ountryID
and r.RegionID=m.re gionID
and m.marketID=t.ma rketID
order by c.CountryID, r.RegionID, t.marketName";

$result = safe_query($lin k, $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"><t r><td class="lead">*S ervice Region:</td><TD><SELECT NAME='CountryA' SIZE="1" onChange='count ryselected(this )' >

<OPTION value='1'>Canad a</OPTION>
<OPTION value='2'>Unite d States</OPTION></SELECT></TD><TD><SELECT NAME='ProvinceA ' SIZE=1 onChange='regio nselected(this) '>
<OPTION>-- Choose --</OPTION></SELECT></TD><TD colspan='3'><SE LECT NAME='MarketA' SIZE=1><OPTION>-- Choose --</OPTION></SELECT></TD>

<SCRIPT LANGUAGE="JavaS cript">
function countryselected (elem){
for
(var i = document.myform .ProvinceA.opti ons.length; i >= 0; i--)
{
document.myform .ProvinceA.opti ons[i] = null;
}
if (elem.value==1) {
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Nationa l', '1');
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Alberta ', '2');
............... ............
cut away some data
............... ............
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Yukon', '14');
}
if (elem.value==2) {
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Nationa l', '15');
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Alabama ', '16');
............... .............
cut away some data
............... .............
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Wyoming ', '64');
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('New York', '65');

}
}

function regionselected( elem){
for (var i = document.myform .MarketA.option s.length; i >= 0; i--)
{
document.myform .MarketA.option s[i] = null;
}
if (elem.value==1) {
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('Nationa l', '1');
}
if (elem.value==2) {
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('Calgary Lethbridge', '7');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('Edmonto n', '6');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('Lloydmi nster (AB/SK)', '41');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('Medicin e Hat', '40');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('Red Deer', '28');
}
............... ............... .
cut away some data
............... ............... .
if (elem.value==65 ){
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('Casper' , '246');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('Cheyenn e', '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"><t r><td class="lead">*S ervice Region:</td><TD><SELECT NAME='CountryA' SIZE="1" onChange='count ryselected(this )' >

<OPTION value='1'>Canad a</OPTION>
<OPTION value='2'>Unite d States</OPTION></SELECT></TD><TD><SELECT NAME='ProvinceA ' SIZE=1 onChange='regio nselected(this) '>
<OPTION>-- Choose --</OPTION></SELECT></TD><TD colspan='3'><SE LECT NAME='MarketA' SIZE=1><OPTION>-- Choose --</OPTION></SELECT></TD>

<SCRIPT LANGUAGE="JavaS cript">
function countryselected (elem){
for
(var i = document.myform .ProvinceA.opti ons.length; i >= 0; i--)
{
document.myform .ProvinceA.opti ons[i] = null;
}
if (elem.value==1) {
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Nationa l', '1');
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Alberta ', '2');
............... ............... ....
cut away some data
............... ............... ....
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Yukon', '14');
}
if (elem.value==2) {
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Nationa l', '15');
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('Alabama ', '16');
............... ............... ...........
cut away some data
............... ............... ..........
document.myform .ProvinceA.
options[document.myform .ProvinceA.opti ons.length]
= new Option('New York', '65');

}
}

function regionselected( elem){
for (var i = document.myform .MarketA.option s.length; i >= 0; i--)
{
document.myform .MarketA.option s[i] = null;
}
if (elem.value==1) {
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('1');
}
if (elem.value==2) {
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('7');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('6');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('41');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('40');
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('28');
}
............... ............... ..........
cut away some data
............... ............... ..........
if (elem.value==65 ){
document.myform .MarketA.
options[document.myform .MarketA.option s.length]
= new Option('246');
document.myform .MarketA.
options[document.myform .MarketA.option s.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