Menampilkan data sebagai hasil dari pilihan select, menggunakan ajax jquery. dalam tutorial ini kita memakai tiga berkas.
1.index.php
2.sumberdata.php
3.jquery-1.3.2.min.js
isi file dari index.html sebagai berikut
<!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=iso-8859-1" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#loading")
.ajaxStart(function(){
$(this).show(500);
$(this).text('loading...');
$("#container").hide(500);
})
.ajaxStop(function(){
$(this).hide(500);$("#container").show(500);
});
$("#myForm select#roomid").change(function(e){
e.preventDefault();
if($(this).val()==""){ $("#container").hide(); }
else {
$.post("sumberdata.php", { roomid: $(this).val() },
function(data){
$("#container").html(data);
});
}
});
});
</script>
</head>
<body>
<form id="myForm" name="myForm">
<select name="roomid" id="roomid" size="1" title="Please select room" >
<option value="" selected="selected">SELECT ROOM</option>
<option value="1" >Deluxe Room - Twin</option>
<option value="2" >President Suite</option>
</select>
<div id="loading"></div> <div id="container"></div>
</form>
</body></html>file jquery bisa didapatkan di http://docs.jquery.com/Downloading_jQuery atau kita bisa juga menggunakan library jquery yang ada di google,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Sedangkan untuk file sumberdata.php merupakan array, yang menerima masukan input dari index.php
<?php
switch ($_POST['roomid'])
{
case '1':
$result = 'Deluxe Room - Twin';
break;
case '2':
$result = 'President Suite';
break;
}
echo $result;
?>Demo :klik disini
