Membuat Pilihan Combobox Dinamis Tanpa AJAX
May 13th, 2009 | by rosihanari |
Cetak Artikel Ini
Ada salah seorang rekan (mas Arif Budiman) yang sekaligus menjadi member saya menanyakan “Bisakah membuat pilihan combobox dinamis tanpa menggunakan AJAX?”.
Beliau menggambarkan kasusnya sebagai berikut:
Misalkan terdapat dua buah combobox. Combobox pertama berisi pilihan tentang spesialisasi dokter, serta combobox kedua berisi pilihan dokter yang sesuai pada spesialisasi dalam combobox pertama. Sebagai contoh misalkan pada combobox pertama dipilih spesialisasi penyakit dalam, maka secara otomatis dan langsung pada combobox dua menampilkan daftar pilihan dokter yang spesialisasinya penyakit dalam. Adapun data yang ditampilkan pada kedua combobox disimpan dalam database MySQL sehingga tidak bersifat statis.
Memang solusi yang bisa dipilih untuk menyelesaikan kasus di atas adalah dengan AJAX (Asynchronous Javascript and XML). Namun… bagi yang belum paham tentang AJAX, jangan khawatir.. ada kok solusi lainnya yaitu dengan menggunakan gabungan Javascript DOM dan PHP.
Mau tahu caranya? Nah… simak lebih lanjut artikel ini 
OK bagaimana sih konsep penggunaan gabungan antara Javascript DOM dan PHP untuk menyelesaikan kasus di atas? Ya.. konsepnya adalah kita akan mengenerate Javascript DOM dengan PHP. Javascript itu nanti yang akan digunakan untuk memberikan efek dinamisnya.
Mungkin ada yang bertanya, ngapain harus pakai PHP? apa dengan Javascript DOM saja tidak cukup? Mmm… jawabannya saya belum tahu karena saya belum pernah menjumpai cara koneksi dari Javascript ke MySQL. Kemungkinan bisa dengan menggunakan ODBC, namun saya belum pernah mencobanya. Mengingat Javascript adalah client side (artinya terletak di sisi client) dan MySQL adalah server side (terletak di sisi server), maka kita butuh server side scripting yang bisa mengenerate Javascript sekaligus bisa koneksi ke MySQL di server, dalam hal ini kita menggunakan PHP.
Nah.. kembali ke masalah di atas, pada artikel ini akan dibahas contoh aplikasinya namun dengan kasus yang diambil tidak sesuai dengan kasus yang dicontohkan mas Arif Budiman di atas. Adapun kasus yang saya ambil di sini adalah terkait pemilihan Nama Propinsi dan Nama Kabupaten.
Skenario dari aplikasi ini adalah, setelah user memilih salah satu nama propinsi dari combo box pertama, maka secara otomatis pada combo box kedua memunculkan daftar pilihan nama-nama kabupaten yang terdapat pada propinsi terpilih.
Sesuai kasus pertama yang disampaikan mas Arif di atas, yaitu data pilihan dalam combo box disimpan dalam MySQL, maka terlebih dahulu kita siapkan tabel dan sampel datanya untuk kasus ini.
CREATE TABLE propinsi ( idProp int(11), namaPropinsi varchar(50), PRIMARY KEY (idProp) ) CREATE TABLE kab ( idKab int(11), namaKabupaten varchar(50), idProp int(11), PRIMARY KEY (idKab) ) INSERT INTO propinsi VALUES (1, 'Jawa Tengah'); INSERT INTO propinsi VALUES (2, 'Jawa Barat'); INSERT INTO propinsi VALUES (3, 'Jawa Timur'); INSERT INTO kab VALUES (1, 'Kab. A', 1); INSERT INTO kab VALUES (2, 'Kab. B', 1); INSERT INTO kab VALUES (3, 'Kab. C', 1); INSERT INTO kab VALUES (4, 'Kab. D', 2); INSERT INTO kab VALUES (5, 'Kab. E', 2); INSERT INTO kab VALUES (6, 'Kab. F', 2); INSERT INTO kab VALUES (7, 'Kab. G', 3);
Dari sampel data di atas tampak bahwa untuk propinsi Jawa Tengah terdapat 3 kabupaten yang bisa dipilih yaitu A, B dan C. Jawa Barat terdapat 2 kabupaten yaitu D dan E, sedangkan Jawa Timur terdapat kabupaten F dan G.
OK.. langkah berikutnya kita terlebih dahulu siapkan halaman untuk membuat combobox pertama.
demo.php
<?php
// koneksi mysql
mysql_connect('dbhost', 'dbuser', 'dbpass');
mysql_select_db('dbname');
?>
<html>
<head>
</head>
<body>
<h1>Demo</h1>
<form name="demo" method="post" action="submit.php">
<table>
<tr><td>Pilih Propinsi</td><td>:</td>
<td>
<select name="prop" onchange="showKab()">
<option>Silakan Pilih</option>
<option>------------------------</option>
<?php
// query untuk menampilkan propinsi
$query = "SELECT * FROM propinsi";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
}
?>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Dari script di atas ada beberapa catatan yang perlu kita perhatikan adalah: untuk form kita berikan nama ‘demo’ (name=”demo”), kemudian pada combobox propinsi tersebut kita kasih event ‘onchange‘. Maksudnya adalah ketika proses selection pada combobox tersebut dilakukan maka akan muncul suatu efek tertentu. Nah… event ‘onchange’ ini nanti akan memanggil function dalam Javascript bernama showKab().
Selanjutnya, kita buat juga combobox kedua untuk memilih kabupatennya. Combobox ini kita letakkan dalam form yang sama dengan combobox kedua. Namun.. untuk combobox kedua ini, kita kasih NULL option atau sementara tidak ada daftar option pilihannya karena option tersebut nantinya akan digenerate secara dinamis.
demo.php
<?php
// koneksi mysql
mysql_connect('dbhost', 'dbuser', 'dbpass');
mysql_select_db('dbname');
?>
<html>
<head>
</head>
<body>
<h1>Demo</h1>
<form name="demo" method="post" action="submit.php">
<table>
<tr><td>Pilih Propinsi</td><td>:</td>
<td>
<select name="propinsi" onchange="showKab()">
<option>Silakan Pilih</option>
<option>------------------------</option>
<?php
// query untuk menampilkan propinsi
$query = "SELECT * FROM propinsi";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
}
?>
</select>
</td>
</tr>
<tr><td>Pilih Kabupaten</td><td>:</td>
<td>
<select name="kab" id="kabupaten">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Perlu dicatat pula bahwa untuk combobox kedua ini kita perlu beri nama id (id=”kabupaten”) karena akan digunakan sebagai referensi untuk Javascript DOM nya. Javascript DOM nantinya akan mengenerate daftar item option ke dalam komponen berdasarkan nama id ini.
Nah… selanjutnya kita akan berfokus ke dalam Javascript DOM nya.
Anda sudah mengenal Javascript DOM (Document Object Model) bukan? Ya.. dalam kasus ini Javascript DOM akan digunakan untuk mengisi daftar option pada combox box kedua. Secara umum perintah dalam Javascript DOM untuk menyisipkan tag HTML ke dalam suatu komponen dalam halaman web adalah:
document.getElementById('nama id komponen').innerHTML = "...";
Sehingga dari kasus ini, karena komponen yang akan disisipkan tag HTMLnya adalah yang memiliki id=”kabupaten” maka perintah Javascript DOM nya adalah
document.getElementById('kabupaten').innerHTML = "...";
Keterangan: Tanda titik-titik tersebut nantinya akan diisi dengan tag HTML untuk membuat option comboboxnya.
Berikut ini contoh perintah Javascript DOM untuk menyisipkan option combobox ke dalam komponen id=”kabupaten” bila propinsi yang dipilih adalah Jawa tengah (idProp = 1)
<script language="JavaScript" type="text/JavaScript">
function showKab()
{
if (document.demo.propinsi.value == "1")
{
document.getElementById('kabupaten').innerHTML = "<option value='1'>Kab. A</option><option value='2'>Kab. B</option><option value='3'>Kab. C</option>";
}
}
</script>
Keterangan:
Maksud dari if (document.demo.propinsi.value == "1") adalah bila yang dipilih dari combobox propinsi adalah 1 (Jawa Tengah) maka tampilkan option berisi kabupaten yang ada dalam propinsi Jawa Tengah. Maksud dari ‘demo’ sendiri adalah nama form dimana di dalamnya terletak combobox propinsinya (<form name="demo" .../>), ‘propinsi’ adalah nama komponen dari combobox propinsi (<select name="propinsi" ... />)
Namun… mengingat dalam database terdapat 3 propinsi, kita perlu mengenerate Javascript secara otomatis untuk ketiga propinsi tersebut. Berarti nanti diharapkan terdapat 3 buah IF untuk masing-masing pilihan propinsi. Lantas.. bagaimana cara mengeneratenya? ya… kita gunakan PHP.
<script language="JavaScript" type="text/JavaScript">
function showKab()
{
<?php
// membaca semua propinsi
$query = "SELECT * FROM propinsi";
$hasil = mysql_query($query);
// membuat if untuk masing-masing pilihan propinsi beserta isi option untuk combobox kedua
while ($data = mysql_fetch_array($hasil))
{
$idProp = $data['idProp'];
// membuat IF untuk masing-masing propinsi
echo "if (document.demo.propinsi.value == \"".$idProp."\")";
echo "{";
// membuat option kabupaten untuk masing-masing propinsi
$query2 = "SELECT * FROM kab WHERE idProp = $idProp";
$hasil2 = mysql_query($query2);
$content = "document.getElementById('kabupaten').innerHTML = \"";
while ($data2 = mysql_fetch_array($hasil2))
{
$content .= "<option value='".$data2['idKab']."'>".$data2['namaKabupaten']."</option>";
}
$content .= "\"";
echo $content;
echo "}\n";
}
?>
}
</script>
Hasil script di atas akan mengenerate Javascript sbb:
<script language="JavaScript" type="text/JavaScript">
function showKab()
{
if (document.demo.propinsi.value == "1"){document.getElementById('kabupaten').innerHTML = "<option value='1'>Kab. A</option><option value='2'>Kab. B</option><option value='3'>Kab. C</option>"}
if (document.demo.propinsi.value == "2"){document.getElementById('kabupaten').innerHTML = "<option value='4'>Kab. D</option><option value='5'>Kab. E</option><option value='6'>Kab. F</option>"}
if (document.demo.propinsi.value == "3"){document.getElementById('kabupaten').innerHTML = "<option value='7'>Kab. G</option>"}
}
</script>
Nah… terakhir kita gabungkan script di atas dengan script sebelumnya menjadi satu kesatuan.
demo.php
<?php
// koneksi mysql
mysql_connect('dbhost', 'dbuser', 'dbpass');
mysql_select_db('dbname');
?>
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function showKab()
{
<?php
// membaca semua propinsi
$query = "SELECT * FROM propinsi";
$hasil = mysql_query($query);
// membuat if untuk masing-masing pilihan propinsi beserta isi option untuk combobox kedua
while ($data = mysql_fetch_array($hasil))
{
$idProp = $data['idProp'];
// membuat IF untuk masing-masing propinsi
echo "if (document.demo.propinsi.value == \"".$idProp."\")";
echo "{";
// membuat option kabupaten untuk masing-masing propinsi
$query2 = "SELECT * FROM kab WHERE idProp = $idProp";
$hasil2 = mysql_query($query2);
$content = "document.getElementById('kabupaten').innerHTML = \"";
while ($data2 = mysql_fetch_array($hasil2))
{
$content .= "<option value='".$data2['idKab']."'>".$data2['namaKabupaten']."</option>";
}
$content .= "\"";
echo $content;
echo "}\n";
}
?>
}
</script>
</head>
<body>
<h1>Demo</h1>
<form name="demo" method="post" action="submit.php">
<table>
<tr><td>Pilih Propinsi</td><td>:</td>
<td>
<select name="propinsi" onchange="showKab()">
<option>Silakan Pilih</option>
<option>------------------------</option>
<?php
// query untuk menampilkan propinsi
$query = "SELECT * FROM propinsi";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
}
?>
</select>
</td>
</tr>
<tr><td>Pilih Kabupaten</td><td>:</td>
<td>
<select name="kab" id="kabupaten">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Bila Anda coba teknik dan script di atas, maka akan tampil sebagaimana screen shot berikut ini
OK.. selamat mencoba ya… demikian mas Arif Budiman artikelnya mudah-mudahan bermanfaat bagi Anda dan pengunjung setia blog ini semuanya.
[ Download Script ]
UPDATE – Maaf.. ada ralat sedikit.
Sepertinya script di atas tidak bisa jalan di browser IE karena ternyata setelah diselidiki, hal ini diakibatkan oleh tidak supportnya IE untuk menyisipkan tag HTML melalui innerHTML ke dalam komponen SELECT. Sehingga alternatif lain adalah kita ubah perintah
$content = "document.getElementById('kabupaten').innerHTML = \"";
menjadi
$content = "document.getElementById('kabupaten').innerHTML = \"<select name='kab'>";
serta perintah
$content .= "\"";
menjadi
$content .= "</select>\";";
Selanjutnya pada bagian pilih kabupaten
<select name="kab" id="kabupaten"></select>
diganti menjadi
<div id="kabupaten"></div>
hal ini mengingat innerHTML bisa digunakan untuk menyisipkan tag HTML ke dalam komponen DIV, baik dalam IE maupun Firefox.
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
Beberapa artikel terkait
- Menjalankan Script PHP Untuk SMS Gateway Tanpa Autorefresh Dengan AJAX
- Script Multiple File Upload Dengan PHP
- Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan
- Membuat Countdown Menuju Tanggal dan Waktu Tertentu Dengan AJAX
- Teknik Membuat Script Mengubah Ukuran Image dengan Javascript
- Membuat Checkbox Dinamis dan Pemrosesannya
- Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)
- Editing Data Tanggal via Form dengan PHP
- Tentang DOM di Javascript
- Alternatif Script Untuk Memproses Input Data Form Dinamis
Share this article on:
Kata kunci: combobox - DOM - Javascript - PHP -
Dulu saya pernah nyari script seperti ini, dapet sih…tapi ya itu, cuma bisa copy paste, gak mudeng maksud scriptnya. setelah baca tulisan Pak Ari, ooo…ternyata begitu to!!!he…he…
Makasih Pak Ari (dulu gak Mau di panggil Pak Rosi
). sukses….
mas ku coab dtes kok ndak bsa y?
data di dropdown ke dua ga muncul
oia klo lbih dr dua gmn mas kombo boxnya?? and datanya dalam satu tabel…
to fajar: kalau gak bisa coba cek scriptnya lagi mas.. coba sesuaikan struktiur tabelnya, nama tabel, nama field. Kalau masih tetap gak bisa, coba download scriptnya di link yang saya sediakan di atas.
to mas yudi: sama2 mas…
to arif budiman: sama2 mas… tidak ada ruginya kan bergabung di member? He.. 3x
to pak ari..
saya baru di php pak…
saya memiliki case yang mirip dengan tutorial yang pa ari berikan…namun case saya mungkin adalah perluasan dari tutorial pa ari…
singkat saja ya pak…
setelah user memilih salah satu nama propinsi dari combo box pertama, maka secara otomatis pada combo box kedua memunculkan daftar pilihan nama-nama kabupaten yang terdapat pada propinsi terpilih. setelah itu ketika muncul pilihan nama-nama kabupaten pada combobox kedua, dan user memilih salah satu pilihan dari nama kabupaten muncullah data2 yang berhubungan dengan kabupaten seperti misal nama bupatinya, luas kabupatennya dan lain2 sebagainya berupa text secara otomatis..
yang ingin saya tanyakan adalah bagaimanakah cara untuk menampilkan data-data tersebut secara otomatis berdasarkan pilihan dari combobox yang kedua??
Mohon diberikan tutorialnya juga ya pak kalau memang ada….
heee….
Thanks…
BR,
Boy
emang rosihanari emang pinter tenan, aq yg koding aja mumet karena harus koding terus……
to endip: he.. 3x dinikmati saja mas…
Mas,mau nanya.. Aq kok habis milih combo box 1 nya, selected nya kok langsung kembali ke yang pertama yach??
Data yg di combo box 2 sich bener…
to andrie: kalau saya coba gak tuh mas.. coba cek lagi scriptnya. Kalo masih gak bisa, coba download scriptnya di link yang sudah disediakan, lalu bandingkan dengan script Anda.
aq coba ga bisa mas..
combo kedua kosong..
knapa ya..?
udah aq download scripnya n databasenya jg aq pake yg ada di situs..tetap ga bisa
knapa ya..?
to widi: coba cek lagi mas… manusia tempat salah dan lupa. Mungkin ada nama variabel yang salah besar kecilnya atau ada huruf yang kurang.
buat mas rosihanari …
scripnya udah mau jalan, ternyata scripnya ga mau jalan di ie6, kalo di mozila bisa jalan, apa memang begitu..?
supaya bisa jalan di ie 6 gimana caranya ya
terimakasih atas bantuannya…
widi-denpasar
mas.. scripnya kok ga jalan di IE6 ya…?
kalo di mozila mau jalan…
gimana caranya supaya scrip dari metode ini bisa jalan di IE6..?
Terimakasih
widi-denpasar
to widi: eh iya mas, sepertinya ada yang gak compatible di IE. Ternyata untuk IE kita gak bisa nambahin tag elemen <option></option> ke komponen <select></select> dengan innerHTML. Tunggu revisi dari saya.
to widi: tunggu nanti ada revisi dari saya.
ok…
Terimakasih atas ilmunya mas…
widi
from denpasar
bapak saya senang dengan melihat metode sript bapa..akan tetapi kenapa sript tersebut tidak jalan untuk combobox yang kedua ?? dan apakah sript php bisa jalan dengan di gabung seperti itu dengan java untuk pemangilan fungsi java???yang diatas??
function showKab()
{
<?php
// membaca semua propinsi
$query = “SELECT * FROM propinsi”;
$hasil = mysql_query($query);
to riki: saya gak bisa Java mas, makanya saya belum bisa berkomentar bila ditanya bisakah digabung dengan Java. Tentang script yang tidak jalan. Selama saya cek di Firefox, scriptnya bisa jalan dengan normal. Bila Anda jg menggunakan Firefox dan gak jalan, maka coba cek kembali dengan scriptnya. Mungkin ada yang kurang. Sedangkan bila Anda pakai IE, memang ada sedikit perbedaan. Ada ralat di bagian bawah artikel, karena sebelum adanya ralat memang scriptnya tidak bisa jalan di IE.
Bapak rosihantti..YTh …scriptnya bisa jalan sudah…rupanya keslahan ada pada script kedua pada select kabupaten…karena nama data base sql kedua kabupaten harusnya nya
$query2 = “SELECT * FROM kabupaten WHERE idProp = $idProp”;
bukan : $query2 = “SELECT * FROM kab WHERE idProp = $idProp”;
….makasih buat scriptnya yah pak sangat berguna sekali…..maju terus yah pak…dan sukses buat anda selalu…trims
to riki: sama2 mas… tetap waspada terhadap script yang Anda tulis
mas kq g mw jalan scriptnya?/.. udah q coba berulang2,,,
aq pake table kw_category
idCat cat
trus kw_artist
id idCat name
trus kq g mw y??
to wiswakarma: coba cek lagi mas. Banyak temen2 lain yang sempat bilang gak bisa jalan, akhirnya hampir semuanya bisa introspeksi diri karena telah melakukan kesalahan di scriptingnya. Coba cek kembali nama tabel, nama field dll.
Makasih tutorialnya Pak Ari..,sekalian mo nanya misalnya kasusnya pada registrasi mata kuliah, ada isian nama mahasiswa,semester dan chek box mata kuliah yang dipilih , dan ketika user mengisi semester maka otomatis keluar mata kuliah khusus semester itu aja , tu gimana ya klo tanpa pake ajax terima kasih atas jawabannya
to daun hijau: ya konsepnya hampir sama. Untuk IF yang ada dalam javascript (dalam event ketika memilih semester), berarti hanya ada 2 kemungkinan yaitu jika semester yang dipilih genap atau ganjil. Trus tinggal pake query saja SELECT * FROM tabelMK WHERE smt = (genap/ganjil), tergantung semester apa yang dipilih (genap atau ganjil) lalu hasilnya ditaruh ke dalam >option<…>/option< yang ada di combo.
kalo menurut gw sih lebih bagusan langsung belajar ajax framework aja kayak jquery ama dojo, dan tentunya anda harus punya basic javascript. menurut gw memaksakan diri memakai javascript saja ato ajax yang di coding sendiri hanya memperlama pembangunan aplikasi… kalo memang mau ngoprek ajax gak masalah, tapi kalo lagi ngerjain project kita harus cepat tepat… menurut gw paling bagus mulai beralih pada framework2… spt jquery ato dojo.. dll
Wah makasih banget ya buat yang nulis article ini, ak sangat terbantu.
mas nanya nih gmana kl seandainya combo box yg ke 2 itu diganti text field yg funsinya untuk nampilin idprovinsinya…….mana yang harus dirubah??dan perubahannya apa….
saya gunakan untuk buat tugas kuliah mas
dimana comboboxnya itu isinya nama sekolah terus textfieldnya nourutsekolah….
Mas, mau tanya, kalau di post ke page lain, saya mau ambil $_POST yang div itu bagaimana ya. sy coba data yang di post kososng. tx
to ope: maksudnya gmn mas? saya blm paham, maklum dah tua nih
hahaha keknya masih mudah deh xixixi.
gini mas,
Pilih Kabupaten:
nah saya mo klik submit pake method post ke halaman submit.php, dan saya cek di submit php value dari combobox name kab tidak ada.
cara ambil valuenya bagaimana ya apa harus pake cara2 tertentu, data valuenya ada yg di
$content .= “”.$data2['namaKabupaten'].”";
itu mas.
tx
to ope: lho bukankah pake $_POST['namakomponencombo']; saja bisa?
gak bisa mas, gak tahu kenpa nih, udah ku coba gak bisa hiks. mungkin karena dia masuk innerhtml itu kali ya mas, terus dimasukin di id=kabupaten kali. coba deh mas. masa sy gak bisa ambil dari $_POST value dari kabupaten
(
mas mo tnya nih……………..
mas setelah di coba code yang Update buat IE,
teryata value dari combo untuk kabupaten di Mozilla ngak masuk ke MySQL yh… tapi klo pke code yang pertama value dari combo di mozilla bisa masuk ke MySQL… Tapi klo di IE Code yah jalan… kira2 ada solusi yh gak????
to ilham & ope: kok punya saya bisa ya mas? coba cek lagi nama-nama komponennya, misalnya di atribut name=”…” dan id=”…” kalau itu salah, gak bisa baca valuenya. Saya coba script pertama di Firefox (sebelum update untuk IE) bisa jalan, sekaligus disubmit bisa baca nilai ID propinsinya. Memang untuk script pertama bila dijalankan di IE tidak bisa jalan. Setelah saya update script kedua untuk IE, baik IE maupun Firefox juga bisa jalan, sekaligus bisa baca juga value ID propinsinya setelah disubmit.
to ope: Anda menggunakan apa? kalau saya menggunakan $_POST['kab']; bisa muncul tuh, munculnya adalah ID kabupatennya, karena sengaja saya pilih valuenya adalah ID kabupaten.
maaf pak, saya mau tanya…apakah tutorial ini bisa digabungkan dengan tutorial teknik-submit-data-melalui-multi-form dalam satu form??
karena saya mencoba tapi tidak bisa?
terima kasih sebelumnya
to fredy peter: bisa saja mas… coba dicek lagi ya..
Agar supaya list kabupaten tampil pada saat loading tambahkan coding java script:
function listKab()
{
document.getElementById(‘kabupaten’).innerHTML = "<select name=’kab’><option value=” selected></option></select>";
}
Kemudian coding <body> diganti dengan <body onLoad="listKab();">
to Azis Pamuji: thanks mas Azis atas tambahannya…
saya udah nyoba dan berhasil dengan mudah.. he..he..
cuma yang jadi masalah, adalah adanya option
‘Silakan Pilih’ dan ‘————’
kode diatas adalah membuat ketika option propinsi dipilih, maka option kabupaten akan muncul otomatis..
nah ternyata setelah option propinsi dirubah ke option
‘Silakan Pilih’ atau ‘———’
ternyata option kabupaten tidak berubah alias tetap muncul… nah kalau di submit, maka yang tersimpan di database tidak valid..
kolom propinsi berisi ‘Silakan Pilih’ dan kolom kabupaten berisi ‘Kab.A’
trims..
.-= maseko´s last blog ..setengah perjalanan ramadhan =-.
ralat.. setelah saya cek di database..
tadi setelah tes.. ga sempet ngecek he..he..
hasilnya yang muncul adalah
kolom propinsi kosong..
kolom kabupaten berisi IdKab..
.-= maseko´s last blog ..setengah perjalanan ramadhan =-.
tetep g jalan padahal udah copy paste,,,combo box kabupaten g tampil…..
to ivan: coba dicek lagi mas. Untuk IE ada penanganan khusus, ada keterangannya di bagian paling bawah
mas,kalo setelah dipilih combobox yang kedua mis kab.A datanya langsung di group by gimana caranya mas?
soalnya databaseku,datanya banyak banget jadi pengen ku group by aja..
makasih ya..
to gege: oh bisa saja mas. Caranya ya tinggal disisipkan saja GROUP BY nya di dalam query SQL nya untuk menampilkan list di combo kedua.
mas,kok ada peringatan
Deprecated: Call-time pass-by-reference has been deprecated in C:/…
ada masalah apa tuh?
salam kenal mas,
kalo menggunakan jQuery gimana caranya mas ?
mohon pencerahaannya, thx’s jika ada tutorialnya
wassalam
to aeris: maaf mas saya blm pernah pake JQuery.
dijadian form dan mo isi datanya ke database cemana ya? mohon petunjuknya
Salam kenal mas,
Mas Ary, kalo kasusnya dibalik, misalkan ketika kita klik combobox kabupatennya lalu muncul propinsinya secara otomatis, bagaimana ya caranya?
Terima kasih atas sharing ilmunya.
“Website Mas Ary bener2 manfaat sekali, semoga Allah membalasnya dengan balasan yang lebih baik”
to dwi sulistyanto: makasih mas, salam kenal juga. Sebenarnya dibalik atau tidak, caranya sama saja mas. Berarti pertama menampilkan list option kab dulu dengan query SELECT * FROM kab. Kemudian di dalam function Javascriptnya, pertama lakukan query SELECT * FROM kab dulu, trus untuk setiap ID kabupaten berikan kondisional, IF nilai ID kab = xxx THEN tampilkan Nama Propinsi (diambil dari tabel Propinsi). http://rosihanari.net
Salam kenal mas Ari, mas kalau kasusnya ada 3 kriteria gimana ya? misal contah diatas tapi ditambah 1 lagi kecamatan, untuk cari kecamatannya gimana ya mas?..
Terima kasih
Mas Ari, trims sebelumnya karena tutorialnya sangat membantu saya.. saya mo tanya :
saya punya 1 combo box ,1 text field, dan 1 tombol.
isi combo box : USD, EUR, AUD.
ketika saya pilih EUR dan tekan tombol Find, maka pada text field muncul data yg benar. tapi pada combo kembali muncul USD i/o EUR ? dapatkah mas membantu saya ? terimakasih banyak-banyak
Salam kenal mas Ari, mas kalau ada 3 pilihan misal propinsi, kabupaten, kecamatan di Internet Explorer gimana mas ? maaf masih awam,
terima kasih
to joni: ya.. konsepnya sama mas, nanti tinggal tambahkan function javascript lagi.
Sebelumnya makasi mas, artikelnya keren2..
saya ada masalah dengan script diatas, semuanya normal and sukses ketika saya coba, tapi ketika saya Coba di Browser IE kok Combobox untuk Kabupatennya Blank/ kosong??
kli di browser yang lain normal dan mau muncul..
thx sebelumnya.. salam.
Maaf mas… aku kurang teliti..
yang di atas hapus aja.. thx infonya..
artikel yg bagus tuk belajar n website yg banyak manfaat.
Assalamu\’alaikum,
Mas Ari, setelah pertanyaan sebelumnya, saya coba dengan membuat data kelurahan, kecamatan, kodya dan kode pos dalam satu tabel.
Saya ingin agar ketika diklik combobox kelurahan maka kotak kecamatan, kodya dan kode posnya terisi secara otomatis.
Script javascript yang dibuat, sama dgn yang dibuat Mas Ari, hanya saja dengan nama tabel yang berbeda dan seluruh datanya dalam satu tabel.
Namun kotak isian tetap saja kosong. Mohon pencerahannya Mas Ari, terima kasih sebelumnya.
Jazakallah khairan katsira.
mas Ari,
Bagaimana caranya agar data dalam combobox tidak me-refresh (kembali ke data paling atas) setelah tekan tombol submit ?
terimakasih
Mas.., gimana klo yg pake AJAX??
to yogi: kalo yang AJAX silakan baca di http://rosihanari.net/web-tutorial/ajax/ajax-tutorial-01.php mas
Pak Saya udah coba script yang bapak kasih, tapi hasil yang masuk ke database saya berupa nomor bukan nama, gimana pak..?
@ais: memang yang masuk adalah ID nya mas, kalo ingin menampilkan namanya nanti pake relasi tabel.
Maaf mas, nanya lagi, maklumlah masih baru belajar, gini..?
Misalkan saya punya table, “Data Sumua”, “propinsi”, “Kabupaten”
Gimana caranya data propinsi dan data kabupaten tersebut kita input ke “data semua”,
bisa kasih saya script-nya nggak, terima kasih
@ais: data semua yang dimaksud itu apa ya?
Maaf pak, saya mau tanya bagaimana kalo saya ingin membuat 3 pilihan combo box???
seperti : Propinsi – Kabupaten – Kecamatan
makasih pak
kalo dengan 3 pilihan, di tambahin nama kecamatan gimana mas?
punyaku kok ga behasil ya
MAS PLEASE BUATIN SCRIPT YANG TAMBAH SATU FUNCTION YAITU KECAMATAN,SOALNYA PENTING BANGET,YA MASA PLEASE
Salam ke P. Rosihan.
maaf, saya mau tanya Pak. bagaimana jika kasusnya semisal seperti ini:
Tabel Kategori:
IDKategori Kategori
1 Makanan
2 Minuman
Tabel Barang
IDBarang NamaBarang IDKategori
1 A 1
2 B 1
3 C 2
4 D 2
isi combo box diambil dari tabel Kategori:
Makanan
Minuman
Jika user memilih “MAKANAN” pada combobox, maka akan tampil:
NamaBarang Kategori
A Makanan
B Makanan
Jadi intinya bagaimana menampilkan data sesuai dengan pilihan pada combobox. mohon pencerahannya untuk hal diatas.
Terima kasih.
@nico: kalo itu, harus pake AJAX betulan mas…
Anda bisa lihat contohnya di http://rosihanari.net/web-tutorial
Terima kasih mas ari atas ilmunya, saya telah mencobanya dan berhasil, tapi apabila pada saat saya mencoba untuk membuat combo box dengan data reference yang banyak, mengapa fungsi tersebut tidak berhasil, data reference yg saya miliki lebih dari 400 reference, saya telah mencobanya menggunakan limit 10 pada sqlqurey database saya, dan combo box tersebut berhasil. apakah hal ini tergantung dari browser yang saya gunakan ato ada hal lain?
@andy: pada prinsipnya bisa mas, karena itu bisa dipakai pada data sejumlah apapun. Mungkin masih ada kesalahan di scriptnya mas. Saran saya jika datanya banyak, mending pakai pure AJAX saja mas. Karena tanpa AJAX bisa mengakibatkan halaman webnya berukuran besar karena data tsb diload ke Javascript.
makasih tutorialnya.
eh mas ari, mu tanya, kalo combonya ada 4 gmana yah? (jika klik propinsi, muncul kecamatan, jika kec. di klik muncul kabupaten, dan ketika kab.di klik muncul desa”nya). trus ada button (proses)
yg nanti akan nampilin grafik (berupa jumlah penduduknya).. thx mas ari ..
tutorialnya pas banget dengan yang saya cari. penjelasannya mudah dimengerti, mudah2an mudah diterapkan juga. terima kasih pak
mas,,,saya udah nyoba script di atas,,,
cuma sedikit dimodifikasi karena mau diterapkan di framework CI…
tapi sayangnya gak jalan…kira2 masalahnya kenapa gak mau jalan ya mas??
mas rosihanari..
mau tnya.. kalo kasus nya seperti ini bagaimana ya..
misal dari mas rosihanari
demo
pilih propinsi :….:
pilih kabupaten:….:
tampilkan gambar kabupaten :
view –> button
……….
……….
……….
……….
jadi menampilkan gambar.jpg sesuai kab tersebut. Bagaimana ya mas ?
mohon bantuan nya.. terima kasih
Makasih kak atas tutorialnya…. mari bertukar link,,,,,,,,,
numpang sruput pak…:)) dan salam kenal.
selamat sore,,,permisi pak ari.saya baru di php,saya mau tanya.
disini saya menggunakan combo dinamis untuk mengisi data pada tabel lain.
?><option value="”<?
penggalan script di atas salah satu penggalan script combo dinamis yg saya gunakan yg fungsinya untuk menampilakan daftar nama kota, la masalahnya saya ingin data yg masuk ke tabel lain itu nama kotanya bukan id_kotanya. jika valuenya saya ganti NAMA_KOTA maka combo dinamiskan g jalan.padahal logikanya nilai value itulah yg masuk ke database.truz gimana solusinya pak ari?apa ada kaitannya sama file java scriptnya?terima kasih sebelumnya pak ari…
siii..p
good banget pak tutorial2nya,
oh iyah pak ada ga script autocomplexer yg kya digoogle itu lho..?
@iyus: kok istilahnya autoxomplexer sih? itu namanya auto complete atau auto suggestion
kalo itu saya blm ada mas
Mas Ari, script nya bagus.
cuma mau tanya Mas, saya kalau pake db propinsikab itu bisa nampilin sempurna, nah kalau saya ganti db dengan punya saya dengan urutan field yg sama kok ga bisa nampilin combo ke 2 ya setelah memilih combo ke 1. apakah karena scriptnya cuma buat hubungin dua table aja? karena tabel yg db yg saya buat itu tabelnya berhubungan 3 tabel. terima kasih Mas sebelumnya
@hardi: mungkin masih ada yang kurang benar mas dalam menyesuaikan nama tabel maupun fieldnya. Coba cek lagi ya, harusnya bisa kok untuk n tabel dan n combo box sekalipun.
Mas Gimana Cara bikin combo yang ketiga,
Misal :
1. Milih Propinsi
2. Milih Kabiupaten
3. Milih Kelurahan
4. Milih RW
5. Milih RT
Thx MAs, Kalao boleh ke email juga dikirimin ya mas
pa rosihanari,,kalau source code untuk menampilkan datanya bagaimana,,??
misalnya ingin menampilkan data alamat yang ada di kab G..
bagaimana untuk source code tombol “tampilkan” nya???
Mas, mau tanya… kalo mau tampilin pesan error nya gimana??? misalnya kabupaten dengan propinsi yang dipilih sama dengan data yang udah ada di database..
misal saya pengen pesan errornya :
” Propinsi jawa tengah dengan kabupaten B telah ada di dalam database, silahkan ulangi pilih “..
Scripnya gimana ya?? Mohon bantuannya…
@L13min: anda pake Primary Key saja mas… Kalo dengan primary key, data yang sama gak bisa dimasukin ke DB.
mas kok saya coba klo propinsinya lebih dari 15
kabupatennya ga jalan iy
@latif: bisa kok mas, untuk data berapapun bisa. Coba cek lagi scriptnya ya.. Don’t give up !!!
sudah mas… tetep ga bisa..
saya kirim via email iy mas… buat di coba mas
terima kasih atas pencerahannya. walau masih bingung tapi saya suka dengan pemaparannya.maklum saya pemula banget. teng shu, mas….
Mantap
makasih mas
Mas ari… Semua coding di atas sudah berjalan dengan baik..
tapi yang saya masih bingung bagaimana cara mengambil value yang di pilih?
jadi setelah saya pilih ke 2 comobox tersebut dan saya tekan submit, maka saya melakukan inputan ke tabel lain..
untuk inputan ke tabelnya tidak perlu di jawab, tetapi bagaimana saya mendapat value dari ke 2 combobox tsb (menggunakan php)?
misal $a=value dari kabupaten
dan $b= value dari provinsi
tolong pencerahannya saya sangat membutuhkan ini.
@franz: ya tinggal pakai $_POST[..] saja mas, misal $propinsi = $_POST['prop'] dan $kabupaten = $_POST['kab'];, dimana $_POST['x'] dengan x adalah nama komponen inputnya (name = ….)
walah ia mas…. ko ga ngeh ya…
betul2 mas sudah bisa ke ambil datanya…
trimakasih banyak mas…
klik iklan meluncur…
@franz: bisa kan mas
sering2 ya mas donasinya… good luck !!
mas,,saya uda coba scriptnya dan berhasil. namun saya mempunya masalah lain. combobox yang ke2 memang sudah muncul saat yg pertama dipilih. hanya saja saat kita submit, yang bisa diinput ke database hanya combobox yang pertama,,isi dari combobox kedua tidak mau terinput ke database. ada solusi?
maksud saya,, memang saya menggunakan file katakanlah submit.php
yang isinya $_POST['propinsi']; $_POST['kabupaten'];
hanya saja value dari kabupaten ga mau diterima karena menggunakan combobox yang dinamis tersebut.sedangkan value dari propinsinya mau
Mas, saya mw tanya, skripna mas tersebut saya integrasikan di halaman web yang menggunakan ajax, namun tidak dapat berjalan, tetapi jika halamanna saya panggil secara terpisah dari website, maka skrip tsb dapat berjalan normal, kira2 apa yang menjadi penyebab terjadinya hal ini? Terimakasih.
@peter: mungkin ada function yang crash atau conflict dengan script ajax nya mas.
terimakasih atas solusinya
Ass.
Pak Ari hasil submit dari script diatas apakah google bisa mendeteksi halaman perhalaman kira kira pak? masalah di websaya tak googling bola bali kok ndak ada satupun halaman yang keluar dari hasil submitan tersebut, tapi yang keluar hanya div headnya saja dan lain-lainya, matursuwun.
wss.
@ali: kalo sebuah halaman munculnya hasil dari submit, setahu saya gak bisa diindex google. Setahu saya yang bisa diindex google itu halaman yang berasal dari sebuah link (CMIIW)
saya coba bwat tiga dropdown tpi gagal….kenapa ya…
tolong tutorialnya dibuat 3 dropdown jadi pengembangan ke4 dan seterusnya jadi lebih mudah…
wah ralat coment sebelumnya….sudah berhasil membuat lebih dari 2 dropdown…
trim bwat tutornya…
mu bertanya…
gmana caranya supaya option statis nya tidak tertimpa sama fuction…
jadi saya ingin di tiap dropdwon juga ada option value yg statis…
misal -ALL- selalu ada di tiap dropdown..??
mas mau nanya, klo ditambah 1 combobox misalnya kelurahan. tapi kelurahan ini perlu nilai dari combobox provinsi dan combobox kabupaten. bisa di handle dg cara diatas g mas??klo bisa, boleh diksh contoh ato klo berkenan tlg dKrim kEmail saya.
trmksh,,
mas..kok ngak bisa yah kalo tipe data yang sebagai nilai yang disamakan (contoh id=char)…?
mohon bantuannya.solnya buat skripsiku nih mas..hehehe.makasih sebelumnya
Aslm pak Rosihan, saya punya kasus tentang combobox. Saya punya 2 tabel : tbkelas dan tbsiswa, pertanyaannya… bagaimana cara membuat sebuah combobox yang isinya diambil dari tbkelas dan sebuah textfield yg secara otomatis isinya diambil dari tbsiswa… dengan catatan satu kelas berisi satu siswa. Jadi hampir mirip dengan artikel bpk di atas, namun menggunakan satu combobox dan satu textfield… mohon pencerahannya. trmksh. Wslm.
bagus mas kalo diterapkan di WEB…
tapi kalo combo box nya diterapkan di WAP harus pake script apa yaa mas??
mohon bantuannya, terima kasih
@sidiq: sama saja mas, WAP itu tag nya sama seperti HTML biasa…
@arie: kalo itu saya biasa pake AJAX mas…
mas, di combobox yang kedua, saya mau ambil nilai untuk “kab” nya.. bagaimana caranya mas?
selamat siang mas rosihan, saya ingin bertanya nih.misalnya saya buat combobox tersebut di halaman insert_kelurahan.php..dan doInsert.php sebagai halaman untuk insert ke dalam database.
bagaimana caranya, bila saat kita klik combobox propinsi JAWA TENGAH,maka combobox yg muncul KAB A, KAB B, KAB C.dan misalnya kita klik KAB A, maka muncul Kel A, Kel B, Kel C. n misalnya kita memilih Kel A.
selanjutnya apabila kita klik Submit, maka akan di proses di doInsert.php n selanjutnya akan di disimpan ke dalam database.bagaimana cara memasukkan nilai KAB A & kel A ke database.saya udah coba, tetap tidak bisa.
mohon bantuannya pak Rosihan.trims
Mas Ari, thank atas scriptnya,
sekalian mau tanya sedikit mas, bgmn caranya mengambil value yg muncul misalkan habis klik propinsi jawa barat muncul klaten, klaten nya ini mau diambil buat ditambahkan ke suatu nilai. trim mas Ari
pak ari, apakah struktur tabel yg digunakan harus selalu sama seperti di atas? saya sudah mencoba script di atas , tetapi tidak dengan dua tabel yg berbeda , yang saya gunakan hanya satu tabel dengan 2 field, hasilnya combo box kedua masih kosong
Pak, saya sudah coba implement, tetapi nilai dari kabupatennya tidak terambil ya, yg keambil itu urutan pertama terus
misal provinsi jawa barat, list kabupatennya bandung, tasik, garut
saya memilih tasik, tetapi yg ke-post/ke kirim itu yg bandung terus alias urutan yg pertama terus, pak..
kira2 gmn ya?
@dianis: coba cek lagi scriptnya ya… keep on trying OK???
@nan: kalau sekedar mencoba dengan kasus yg berikan di atas, ya harus sama. Tapi kalo anda buat untuk kasus anda sendiri boleh beda.