Dependent selects

PHP
1

Please someone give a hand because I don’t see where is the mistake.
I have 3 selects: one for countries, sec for city and the last for streets. First and second work but the streets doesn’t. I have 26 id’s for the city with id=1 and 1 street for the city with id=2. You can see that I don’t get those 26 id’s when you click on city #1.

The live ex is here

and this is the page

<?php
include"config.php";
$query_record = "SELECT * FROM `quiz`";

//echo $query_record ;
$record = mysql_query($query_record) or die(mysql_error());
$row_record = mysql_fetch_assoc($record);
$totalRows_record = mysql_num_rows($record);

while($row_record = mysql_fetch_assoc($record)){
	$category = $row_record['category'];
	$quiz_id = $row_record['quiz_id'];
	$question_id = $row_record['question_id'];
		
}
?>

<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>Select A City</option>

<?php do { ?>
<option value="<?php echo $category; ?>"><?php echo $category; ?></option>
<?php } while($row_record = mysql_fetch_assoc($record)); ?>
</select>

<select name="cities" size="4" style="width: 150px" onClick="this.options[this.options.selectedIndex].value" onChange="updatestreets(this.selectedIndex);">
<select name="streets" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>

<script type="text/javascript">

var countrieslist=document.classic.countries
var citieslist=document.classic.cities
var streetslist=document.classic.streets


var cities=new Array()
cities[0]=""
</script>
<?php
$query_record = "
SELECT
quiz.category,
quiz.quiz_id,
quiz.question_id,
quiz.q,
quiz.question,
quiz.opt1,
quiz.opt2,
quiz.opt3,
quiz.answer,
quiz.photo_src,
quiz.id
FROM
quiz
GROUP BY
quiz.category
";

$record = mysql_query($query_record) or die(mysql_error());
$row_record = mysql_fetch_assoc($record);
$totalRows_record = mysql_num_rows($record);

$cont = 0;
do { $cont = $cont + 1;
$quiz_categ_current = $row_record['category'];

$query_record2 = "
SELECT
*
FROM
quiz
WHERE `category` = '$quiz_categ_current'
GROUP BY 
quiz.quiz_id
";

$record2 = mysql_query($query_record2) or die(mysql_error());
$row_record2 = mysql_fetch_assoc($record2);
$totalRows_record2 = mysql_num_rows($record2);

$concat = "";
do { 
	$concat .= '"'.$row_record2['quiz_id'].'|'.$row_record2['quiz_id'].'", ';
} while($row_record2 = mysql_fetch_assoc($record2)); 
$concat = rtrim($concat,", ");






?>

<script type="text/javascript">
cities[<?php echo $cont; ?>]=[<?php echo $concat; ?>]
</script>
<?php } while($row_record = mysql_fetch_assoc($record)); ?>

<!-- Streets-->
<script type="text/javascript">
var streets=new Array()
streets[0]=""
</script>
<?php
$query_record3 = "
SELECT
quiz.category,
quiz.quiz_id,
quiz.question_id,
quiz.q,
quiz.question,
quiz.opt1,
quiz.opt2,
quiz.opt3,
quiz.answer,
quiz.photo_src,
quiz.id
FROM
quiz
GROUP BY
quiz.quiz_id
";


$record3 = mysql_query($query_record3) or die(mysql_error());
$row_record3 = mysql_fetch_assoc($record3);
$totalRows_record3 = mysql_num_rows($record3);

$cont2 = 0;
do { $cont2 = $cont2 + 1;
$quiz_quiz_id_current = $row_record3['question_id'];

$query_record4 = "
SELECT
*
FROM
quiz
WHERE `question_id` = '$quiz_quiz_id_current'
GROUP BY 
quiz.question_id
";

$record4 = mysql_query($query_record4) or die(mysql_error());
$row_record4 = mysql_fetch_assoc($record4);
$totalRows_record4 = mysql_num_rows($record4);

$concat2 = "";
do { 
	$concat2 .= '"'.$row_record4['question_id'].'|'.$row_record4['question_id'].'", ';
} while($row_record4 = mysql_fetch_assoc($record4)); 
$concat2 = rtrim($concat2,", ");


?>

<script type="text/javascript">
streets[<?php echo $cont2; ?>]=[<?php echo $concat2; ?>]
</script>


<?php } while($row_record4 = mysql_fetch_assoc($record4)); ?>

<script type="text/javascript">
function updatecities(selectedcitygroup){
	citieslist.options.length=0
	if (selectedcitygroup>0){
		for (i=0; i<cities[selectedcitygroup].length; i++)
			citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
	}
}

function updatestreets(selectedstreetgroup){
	streetslist.options.length=0
	if (selectedstreetgroup>0){
		for (i=0; i<streets[selectedstreetgroup].length; i++)
			streetslist.options[streetslist.options.length]=new Option(streets[selectedstreetgroup][i].split("|")[0], streets[selectedstreetgroup][i].split("|")[1])
	}
}
</script>
2

Construct the HTML structure properly and it will work for you. Find the differences.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Option</title>
	<script type="text/javascript" src="DynamicOptionList.js"></script>
</head>
<body>
	<form name="classic">
	<select name="countries" size="4" onchange="updatecities(this.selectedIndex)" style="width: 150px">
		<option selected="selected">Select A City</option>
		<option value="b">b</option>
	</select>
	<select name="cities" size="4" style="width: 150px" onclick="this.options[this.options.selectedIndex].value;" onchange="updatestreets(this.selectedIndex);">
	</select>
	<select name="streets" size="4" style="width: 150px" onclick="alert(this.options[this.options.selectedIndex].value);">
	</select>
</select>
</form>
<script type="text/javascript">
	var countrieslist=document.classic.countries
	var citieslist=document.classic.cities
	var streetslist=document.classic.streets
	var cities=new Array()
	cities[0]=""
</script>
<script type="text/javascript">
	cities[1]=["1|1", "2|2"]
</script>
<!-- Streets-->
<script type="text/javascript">
	var streets=new Array()
	streets[0]=""
</script>
<script type="text/javascript">
	streets[1]=["1|1"]
</script>
<script type="text/javascript">
function updatecities(selectedcitygroup){
	citieslist.options.length=0
	if (selectedcitygroup>0){
		for (i=0; i<cities[selectedcitygroup].length; i++)
			citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
	}
}

function updatestreets(selectedstreetgroup){
	streetslist.options.length=0
	if (selectedstreetgroup>0){
		for (i=0; i<streets[selectedstreetgroup].length; i++)
			streetslist.options[streetslist.options.length]=new Option(streets[selectedstreetgroup][i].split("|")[0], streets[selectedstreetgroup][i].split("|")[1])
	}
}
</script>
</body>
</html>
3

Thank you Rajug for trying to help me.
I saw that you put an extra closing select

</select>
</form>

but I close this select above.

4

Ahh… ok that was just a typo at my post. What i mean is there was a select tag was not closed that’s why it was giving problem in other browsers than the Firefox. In firefox it was working just fine.

5

Ooo, I see :). I didn’t check in other browser that firefox. Do you see other mistakes? Because still doesn’t work.

6

You haven’t changed your code in your demo page yet. Did you try to run the code that i had posted above?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Option</title>
	<script type="text/javascript" src="DynamicOptionList.js"></script>
</head>
<body>
	<form name="classic">
	<select name="countries" size="4" onchange="updatecities(this.selectedIndex)" style="width: 150px">
		<option selected="selected">Select A City</option>
		<option value="b">b</option>
	</select>
	<select name="cities" size="4" style="width: 150px" onclick="this.options[this.options.selectedIndex].value;" onchange="updatestreets(this.selectedIndex);">
	</select>
	<select name="streets" size="4" style="width: 150px" onclick="alert(this.options[this.options.selectedIndex].value);">
	</select>
</form>
<script type="text/javascript">
	var countrieslist=document.classic.countries
	var citieslist=document.classic.cities
	var streetslist=document.classic.streets
	var cities=new Array()
	cities[0]=""
</script>
<script type="text/javascript">
	cities[1]=["1|1", "2|2"]
</script>
<!-- Streets-->
<script type="text/javascript">
	var streets=new Array()
	streets[0]=""
</script>
<script type="text/javascript">
	streets[1]=["1|1"]
</script>
<script type="text/javascript">
function updatecities(selectedcitygroup){
	citieslist.options.length=0
	if (selectedcitygroup>0){
		for (i=0; i<cities[selectedcitygroup].length; i++)
			citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
	}
}

function updatestreets(selectedstreetgroup){
	streetslist.options.length=0
	if (selectedstreetgroup>0){
		for (i=0; i<streets[selectedstreetgroup].length; i++)
			streetslist.options[streetslist.options.length]=new Option(streets[selectedstreetgroup][i].split("|")[0], streets[selectedstreetgroup][i].split("|")[1])
	}
}
</script>
</body>
</html>

This just works fine in FF 3.5.x, IE7, IE8, Chrome. Just close one cities select and see for the first and see other changes.


<select name="cities" size="4" style="width: 150px" onclick="this.options[this.options.selectedIndex].value;" onchange="updatestreets(this.selectedIndex);">
</select>

Rest is just as it is i think because it was the HTML that was taken from your source. I have just formatted the HTMLs.

7

I did the html, but my problem is in php not html I guess. That’s because on the last select I don’t get what i said above: when you click on #1, from the second select, you should get those 26 id’s that I have on my table.