Hello, I'm trying to use Dropkick Jquery select box plug in for my chained select box. However, the plug in only works for my first select box and the second select box did not show up. I have two php files, the form and the func.php. Any help would be much appreciated
Form.php
<link type="text/css" href="../resources/css/dropkick.css" rel="stylesheet" />
<script type="text/javascript" src="../resources/javascripts/dropkick.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)+"')", 0);
});
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>
<script type="text/javascript">
$(function () {
$('.sel1').dropkick();
$('.sel2').dropkick();
});
</script>
<?php
include("func.php");
?>
<form action="" method="post">
<select name="drop_1" id="drop_1" class="sel1">
<option value="" selected="selected" disabled="disabled">Select a Course</option>
<?php getTierOne(); ?>
</select>
<span id="wait_1" style="display: none;">
<img alt="Please Wait" src="../resources/pictures/pages/ajax-loader.gif"/>
</span>
<span id="result_1" style="display: none;"></span>
<span id="wait_2" style="display: none;">
<img alt="Please Wait" src="../resources/pictures/pages/ajax-loader.gif"/>
</span>
<span id="result_2" style="display: none;"></span>
</form>
And here is my Func.php
<?php
//**************************************
// Page load dropdown results //
//**************************************
function getTierOne()
{
$result = mysql_query("SELECT DISTINCT course_code FROM session")
or die(mysql_error());
while($tier = mysql_fetch_array( $result ))
{
echo '<option value="'.$tier['course_code'].'">'.$tier['course_code'].'</option>';
}
}
//**************************************
// First selection results //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == 'drop_1' ) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
include_once('../resources/php/db_connect.php');
$result = mysql_query("SELECT DISTINCT subject_code FROM session WHERE course_code='$drop_var'")
or die(mysql_error());
echo '<select name="drop_2" id="drop_2" class="sel2">
<option value="0" selected="selected">Subject</option>';
while($drop_2 = mysql_fetch_array( $result ))
{
echo '<option value="'.$drop_2['subject_code'].'">'.$drop_2['subject_code'].'</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)+\"')\", 0);
});
return false;
});
</script>";
}
?>