Hi everyone. So I have this script I've been editing for awhile and I thought I was done until I came into this problem. It was a two tier select drop down until I made it into a 2 tier. The first tier pulls all from "tier_one" and then shows options for "tier_two" in the 2nd drop down. The third "tier_three" just echos the last values.
The problem: The last value "tier_three" is not following the chain (I might be the one who messed this one ha) but I need help to correct this
Here is a picture of my website and the MySQL and how it is pulling data.
And here is the function file:
PHP Code:
<?php
//**************************************
// Page load dropdown results //
//**************************************
function getTierOne()
{
$result = mysql_query("SELECT DISTINCT tier_one FROM three_drops ORDER BY tier_one ASC")
or die(mysql_error());
while($tier = mysql_fetch_array( $result ))
{
echo '<option value="'.$tier['tier_one'].'">'.$tier['tier_one'].'</option>';
}
}
//**************************************
// First selection results //
//**************************************
if ( isset($_GET['func']) && ($_GET['func'] == "drop_1") ) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
include_once('db.php');
$result = mysql_query("SELECT DISTINCT tier_two FROM three_drops WHERE tier_one='$drop_var'")
or die(mysql_error());
echo '<select name="drop_2" id="drop_2">
<option value=" " disabled="disabled" selected="selected">Choose one</option>';
while($drop_2 = mysql_fetch_array( $result ))
{
echo '<option value="'.$drop_2['tier_two'].'">'.$drop_2['tier_two'].'</option>';
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"func.php\", {
func: \"drop_2\",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
//**************************************
// Second selection results //
//**************************************
if ( isset($_GET['func']) && ($_GET['func'] == "drop_2") ) {
drop_2($_GET['drop_var']);
}
function drop_2($drop_var)
{
include_once('db.php');
$result = mysql_query("SELECT * FROM three_drops WHERE tier_two='$drop_var'")
or die(mysql_error());
while($drop_3 = mysql_fetch_array( $result ))
{
echo $drop_3['tier_three'];
}
echo '</select> ';
}
?>
Here is the index file
PHP Code:
<?php
include('db.php');
include('func.php');
?><!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>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chained Select Boxes using PHP, MySQL and jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
</head>
<div id="container">
<body>
<div id="menuContainer">
<ul id="menu">
<li id="home" class="first"><a href="index.php"><b>Home</b></a></li>
<li id="single"><a href="about.php"><b>About</b></a></li>
<li id="dropline"><a href="contest.php"><b>Contests</b></a></li>
<li id="dropdown"><a href="email.php"><b>Contact Us</b></a></li>
</ul>
</div>
<div id="leftpic">
<img src="images/turret4.png">
</div>
<div id="box-container">
<div align="center">
<p>
<h1>Pick a Champion</h1>
<div class="styled-select">
<select name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Select a Category</option>
<?php getTierOne(); ?>
</select>
</div>
<span id="wait_1" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
</br>
<h1>Vs</h1>
</br><div class="styled-select">
<span id="result_1" style="display: none;"></span>
<span id="wait_2" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
</div>
</br>
</br>
<span id="result_2" style="display: none;"></span>
</p>
</div>
</div>
<div id="rightpic">
<img src="images/turret3.png">
</div>
<div id="footer">
If you have advice you would like to be posted under a champion
<a href="email.php">click here</a> </div>
</div>
</body>
</html>
Before you post, read our: 
