I am trying to get this example to work http://www.itasc-dev.com/makes/.
Copied it from http://forum.codecall.net/topic/59341-p ... ect-boxes/
The second selectbox need to be populated when a value is choosen in the first selectbox.
Same for the third box, that will be populated when a value is choosen in the second selectbox.
For some reason I get the impression that there is a problem passing back the founded data to the selectbox.
Added new info: Forget the question I wrote above. I figured out the script does actually work in Google Chrome and Firefox, but it does not work in Internet Explorer. How can I fix this problem?
This is the index.php code:
- Code: Select all
<!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" dir="ltr" lang="en">
<!-- http://forum.codecall.net/topic/59341-php-sql-jquery-and-ajax-populate-select-boxes/ -->
<head>
<title>Multiple Select Boxes</title>
<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//$('#loader').hide();
$('#type').change(function() {
$('#make').fadeOut();
//'#loader').show();
$.post("ajax/ajax_make.php", {
type: $('#type').val()
}, function(response){
setTimeout( function() { finishAjax('make', escape(response));
}, 400);
});
return false;
});
$('#make').change(function(){
$('#model').fadeOut();
//$('#loader').show();
$.post("ajax/ajax_model.php", {
type: $('#type').val(),
make: $('#make').val()
}, function(response){
setTimeout( function() { finishAjax('model', escape(response));
}, 400);
});
return false;
});
});
function finishAjax(id, response){
//$('#loader').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
</head>
<body>
<!--<div id="loader"><strong>Loading...</strong></div>-->
<form name="theform" id="form" method="POST" action="search.php">
<label for="type">Type:</label>
<select id="type" name="type">
<?php
include('lib/class_dbcon.php');
$connect = new doConnect();
$q = mysql_query("SELECT * FROM types ORDER BY t_id ASC");
while($row = mysql_fetch_assoc($q))
{
echo '<option value="'.$row['t_id'].'">'.$row['t_caption'].'</option>';
}
$connect->disc();
?>
</select>
<label for="make">Make:</label>
<select id="make" name="make">
<option value="">-- Select Make (html) --</option>
</select>
<label for="model">Model:</label>
<select id="model" name="model">
<option value="">-- Select Model (html) --</option>
</select>
<input type="submit" name="submit" value="Search">
</form>
</body>
</html>
