Berikut ini cara sederhana untuk mengambil isian Select/List Combo HTML menggunakan AJAX JQuery. Contoh program di bawah memang asal copy paste saja, maaf jika sedikit membingungkan. Maksud program ini adalah ada Judul dan Topik, pada masing-masing Judul terdapat beberapa Topik. Pertama-tama buat dahulu script PHP untuk menyiapkan isi Select Combo yang akan diambil dengan AJAX JQuery :
<?php
//ambiltopik.php
include "koneksi.php";
$id_judul = $_GET['id_judul'];
$topik_materi = mysql_query("SELECT * FROM topik WHERE id_judul='$id_judul'");
echo "<option>--Pilih Topik--</option>";
while($t = mysql_fetch_array($topik_materi)){
echo "<option value=\"".$t['id_topik']."\">".$t['topik_materi']."</option>\n";
}
?>
Pada halaman utama yang memakai JQuery AJAX, terdapat Select Combo Judul yang isinya diisi dari Database, kemudian jika Pengguna memilih salah satu isi pilihan Select Combo Judul tersebut maka JQuery akan menghubungi ambiltopik.php menggunakan AJAX untuk mengisi Select Combo Topik di bawahnya sesuai Judul yang dipilih. Menggunakan JQuery AJAX untuk mengambil isi Select Combo Topik ketika Select Combo Judul dipilih :
<link rel="stylesheet" href="config/jqueryui/themes/base/jquery.ui.all.css">
<script src="config/jqueryui/jquery-1.5.1.js"></script>
<script src="config/jqueryui/ui/jquery.ui.core.js"></script>
<script type="text/javascript">
var htmlobjek;
$(document).ready(function(){
$("#id_judul").change(function(){
var id_judul = $("#id_judul").val();
$.ajax({
url: "ambiltopik.php",
data: "id_judul="+id_judul,
cache: false,
success: function(msg){
$("#topik_materi").html(msg);
}
});
});
});
</script>
<div align="center">
<?php
include"koneksi.php";
echo"
<form name=\"form1\" action=\"halaman_admin.php?pilih=simpan_object\" method=\"post\" enctype=\"multipart/form-data\">
<table align='center'>
<tr>
<td>pilih judul</td>
<td><select name='judul_materi' id='id_judul' >
<option value='$b[id_judul]'><em>--pilih judul--</em></option>";
$id_judul = mysql_query("SELECT distinct topik.id_judul, judul.judul_materi FROM topik, judul WHERE topik.id_judul = judul.id_judul ORDER BY id_judul");
while($u=mysql_fetch_array($id_judul)){
echo "<option value=\"$u[0]\">$u[1]</option>\n";
}
echo"</select>";
echo"</td>
</tr>
</td>
<tr>
<td>pilih topik</td>
<td><select name='topik_materi' id='topik_materi'>
<option><em>--pilih topik--</em></option>
</select>
</td>
</tr>
<tr>
<td>nama object</td>
<td><input type='text' size='40' name='nama_object_materi' id='nama_object_materi' ></td>
</tr>
<tr>
<td>isi teks objek</td>
<td><textarea rows='30' cols='100' name='object_materi' id='tinyeditor'></textarea></td>
<td></td>
<tr>
<td></td>
<td><input type='submit' value='simpan' /></td>
</tr>
</table>
</form>";
?>
