Jquery show data on select

November 21st, 2009

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

Tags: ,
Posted in Javascript, webmaster | No Comments »