467,905 Members | 1,839 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,905 developers. It's quick & easy.

Problem in creating 3 level dynamic list box in PHP

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!!
Feb 5 '08 #1
  • viewed: 3436
Share:
1 Reply
ronverdonk
Expert 4TB
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
Feb 24 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

18 posts views Thread by André | last post: by
3 posts views Thread by Craig Jurney | last post: by
3 posts views Thread by Kris van der Mast | last post: by
2 posts views Thread by ajikoe | last post: by
5 posts views Thread by m0002a | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.