Tips : Autopopulate Ajax Select Box PHP-MySQL Jquery Mobile

Kalau baca judul postingan ini mungkin agak aneh, hehehe. Ada ajax, ada php, ada mysql dan ada jquery mobile… alias gabungan ke-empatnya :). Praktek ini skenarionya saya menggunakan jquery mobile, yang otomatis berbasis file html dan akan memiliki field form berupa select box, dan select box tersebut secara inisialisasi akan menampilkan isinya dari database mysql. Karena menggunakan html sementara terhubung ke server, maka saya otomatis menggunakan ajax. Peran PHP disini, sebaga media yg menghubungkan antara ajax dengan mysql.

Disini saya menggunakan jquery jadi, pastikan di dalam file html nya sudah di include jquery. Sementara untuk html nya seperti ini :

1
2
3
<select name="pilih" id="pilih">

    <option>-pilih-</option>             

</select>

untuk javascript nya seperti ini :

$("#pilih").ready(function(){
	$.get('http://server-anda.com/pilih.php', function(pilih){
		$("#pilih").html(pilih).show();
	});
});

Nah, misal dalam database mysql nya memiliki table pilih, maka file php yg di tuju pada http://server-anda.com/pilih.php adalah :

< ?php
$q = "SELECT * FROM pilih";
$r = mysql_query($q);
while($d = mysql_fetch_array($r)){

	echo "$d[pilih]";

}
?>

coba anda jalankan. Selesai 🙂