---

.

---

---

Metode dan Algoritma | Pemrograman Web JQuery : Mengisi Select Combo dengan AJAX JQuery . Anda bisa melakukan konsultasi tentang Pemrograman Web JQuery : Mengisi Select Combo dengan AJAX JQuery melalui form di samping kanan !!!

---

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>";
?>

---

ActionScript AS3 ASP.NET AJAX C / C++ C# Clipper COBOL ColdFusion DataFlex Delphi Emacs Lisp Fortran FoxPro Java J2ME JavaScript JScript Lingo MATLAB Perl PHP PostScript Python SQL VBScript Visual Basic 6.0 Visual Basic .NET Flash MySQL Oracle Android

---

Related Post :

---

Judul: Pemrograman Web JQuery : Mengisi Select Combo dengan AJAX JQuery
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh hank2

Anda sedang membaca artikel tentang Pemrograman Web JQuery : Mengisi Select Combo dengan AJAX JQuery, Semoga artikel tentang Pemrograman Web JQuery : Mengisi Select Combo dengan AJAX JQuery ini sangat bermanfaat bagi teman-teman semua, jangan lupa untuk mengunjungi lagi melalui link Pemrograman Web JQuery : Mengisi Select Combo dengan AJAX JQuery.

---