BIKIN SELECT AGAR ISINYA BISA BERUBAH OTOMATIS
Kadang dalam membuat sebuah website di dalam formnya dibutuhkan select
(atau dalam vb biasa disebut dengan combo box). Jika select tersebut isinya tetap
(sbg contoh isinya 'laki-laki' dan 'perempuan' saja), untuk membuat select tersebut
mudah saja tinggal buat :
<select name="pilih" id="pilih">
<option value="L" >Laki-laki</option>
<option value="P" >Perempuan</option>
</select>
Contoh diatas hanya untuk select yang isinya tetap,
kalau yang dibutuhkan select yang bisa berubah2 gimana???
Contohnya pas ngisi tanggal lahir, biar user nggak bisa milih tangga 31 Februari gimana???
biar nggak usah validasi pake alert/apa segala.
Disini contohnya hanya akan menampilkan nama kab/kota yang provinsinya sudah dipilih
sebelumnya, kalau belum memilih provinsi, maka kabupatennya juga nggak ada yang ditampilkan.
Yang dibutuhkan :
1. data provinsi dan kabupaten, enaknya sih disimpen ke array agar manggilnya enak.
Disini saya menggunakan array multidimensi, gmn cara bwt array multidimensi pake javascript???
klo itu ntar aja ya klo saya ada waktu dan lagi gk males. Langsung saja , begini nyimpen data
kabupaten ke array multidimensinya:
<script language="javascript">
var kab=new Array(7);
for (i=0; i <7; i++) kab[i]=new Array();
kab[1][1]='Bandung';
kab[1][2]='Bekasi';
kab[1][3]='Bogor';
kab[1][4]='Ciamis';
kab[2][5]='Bangkalan';
kab[2][6]='Banyuwangi';
kab[2][7]='Blitar';
kab[2][8]='Bojonegoro';
kab[2][9]='Bondowoso';
kab[3][10]='Banjarnegara';
kab[3][12]='Banyumas';
kab[3][13]='Batang';
kab[3][14]='Blora';
kab[3][15]='Boyolali';
kab[3][16]='Brebes';
</script>
udah ah, segitu aja datanya, klo bingung taruhnya dimana, taruhnya paling atas saja setelah
<title>Untitled</title>. Klo masih belum tau, mending gk usah lanjutin aja, belajar html dasar dulu
:0 ntar daripada tambah pusing he...
2. klo datanya sudah siap terus pertama buat satu select untuk provinsinya dulu. Kodenya:
<select name="prov" id="prov">
<option value="all" >Pilih Provinsi</option>
<option value="1" >Jawa Barat</option>
<option value="2" >Jawa Timur</option>
<option value="3" >Jawa Tengah</option>
</select>
3. klo select untuk provinsinya sudah jadi, buat select untuk kabupaten/kotanya. Kodenya:
<select name="opkab" id="opkab" >
<option value="all">--Semua Kab/Kota--</option>
<option value="none">none</option>
</select>
Klo semua bahan2nya sudah disiapkan, sekarang perhatikan baik-baik...
Pertama buat fungsi untuk mengisikan select dengan kabupaten yang dikelompokkan per provinsi.
Langsung kodenya saja:
<script language="javascript">
function jabar(){
index=1;
for(i=1;i<kab[1].length;i++) {
document.form1.opkab.options[index]=new Option(kab[1][i],i,false,false);
index++;
};
};
function jatim(){
index=1;
for(i=kab[1].length;i<kab[2].length;i++) {
document.form1.opkab.options[index]=new Option(kab[2][i],i,false,false);
index++;
};
};
function jateng(){
index=1;
for(i=kab[2].length;i<kab[3].length;i++) {
document.form1.opkab.options[index]=new Option(kab[3][i],i,false,false);
index++;
};
};
</script>
Sebenarnya intinya sih di document.form1.opkab.options[index]=new Option(kab[3][i],i,false,false);
script tersebut untuk menambahkan/merubah option dari selectnya dimana optionnya menggunkan
index dimulai dari 0 untuk namanya. sebagai contoh, pilihan pertama berarti index ke-0, pilihan
kedua index ke-1 dst.
kalau form1 kebetulan yang saya buat selectnya di dalam form yang namanya form1. Sedangkan
opkab merupakan nama selectnya.
setelah buat fungsi untuk mengelompokkan kabupaten, sekarang buat fungsi untuk mengubah2 pilihan
dari kabupaten sesuai pilihan provinsinya. Kodenya:
<script language="javascript">
function pilihan(kode){
document.form1.cmbKab.options.length=0;
document.form1.cmbKab.options[0]=new Option("--Pilih Kab/Kota--","all",true,false);
if(kode==1) jabar();
if(kode==2) jatim();
if(kode==3) jateng();
if(kode=='all') document.form1.cmbKab.options[1]=new Option("none","none",false,false);
}
</script>
Penjelasanya:
pertama, script document.form1.cmbKab.options.length=0; untuk mengeset agar isi selectnya kosong.
trus script document.form1.cmbKab.options[0]=new Option("--Pilih Kab/Kota--","all",true,false);
untuk membuat satu option dengan index 0(pilihan pertama) yang isinya "--Pilih Kab/Kota--" dan
selectednya true atau pilihan yang ditampilkan "--Pilih Kab/Kota--" bukan nama kabuoaten atau
pilihan yang lain.
script selanjutnya, pasti anda tahu gunanya khan.....
Oya, kalau segitu aja Insyaalloh gak bakal bisa jalan/ berpengaruh apa2, itu karena fungsinya juga
belum dipanggil. Pemanggilan fungsinya diletakkan di pilihan provinsi agar jika provinsi diubah,
maka di kabupaten langsung berubah juga pilihannya.
Caranya dengan menambahkan event onchange pada pilihan provinsinya dan pastikan kode untuk pilihan
provinsinya menjadi seperti ini:
<select name="cmbProv" id="cmbProv" onchange="pilihan(this.value)">
KLo sudah semuanya sekarang silahkan coba sendiri, jika masih belum bisa cek lagi scriptnya barangkali
anda atau malah saya salah mengetikkan scriptnya...
Met berkreasi dengan javascript.
.jpg)
