You are on page 1of 9

JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!

"et
JQuery Multiple-Select Combobox:
Untuk Tampilan Combobox yang Lebih Baik
Tutorial ini #ituli$ oleh Achma Solichin
#an $u#ah #ipublika$ikan #i http:%%achmatim!net pa#a tanggal &' Juli ()&*
Combobox atau Selecbox merupakan $alah $atu komponen penting #ari +orm
inputan! Melalui ,eni$ inputan ini- normalnya pengguna #apat memilih $atu pilihan
yang #itampilkan #alam bentuk #rop-#o.n! "amun #engan menambahkan atribut
multiple- maka pengguna ,uga #apat memilih lebih #ari $atu pilihan $ekaligu$! /a#a
,eni$ combobox #engan pilihan tunggal memang pengguna rata-rata cukup nyaman
#engan bentuk #a$arnya- namun pa#a bentuk ,amak 0multiple-$elect combobox1-
pengguna $eringkali ti#ak terlalu nyaman karena #alam memilih beberapa pilihan
$ekaligu$ haru$ menekan tombol Ctrl! Se#angkan ti#ak $emua pengguna
memahami hal ter$ebut!
2alam tutorial ini- #ibaha$ mengenai bagaimana meman+aatkan /lugin JQuery
Multiple-Select untuk membuat penampilan combobox men,a#i lebih nyaman #an
lebih mu#ah #ari $i$i pengguna! /lugin J3uery Multiple-Select yang akan kita
gunakan mengharu$kan penggunaan library JQuery 4er$i &!5!) ke ata$! /lugin ini
memiliki beberapa +itur unggulan 0$eperti #ikutip #ari $itu$ re$minya
&
1 $ebagai
berikut:
Secara #e+ault akan menampilkan pilihan combobox #alam bentuk checkbox!
Men#ukung pilihan group 0optgroup1!
& http:%%.en6hixin!net!cn%p%multiple-$elect%7multiple-$elect
8alaman & #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
2apat menampilkan beberapa item $ekaligu$ #alam $ebuah bari$!
Ter#apat pilihan :Select all;
Ter#apat pilihan placehol#er!
/lugin ini ,uga #apat #i,alankan #i berbagai bro.$er mo#ern- $eperti <= 5>- Chrome
?>- @ire+ox &)>- Sa+ari *> #an Apera &)!B>!
!o"nloa Library JQuery an #lugin JQuery Multiple-Select
Sebelum mencoba contoh-contoh program #alam tutorial ini- kita haru$
men#o.nloa# library JQuery #an plugin Multiple-Select #i link berikut ini:
$% 2o.nloa# 4er$i terakhir JQuery #i laman http:%%co#e!,3uery!com
&% 2o.nloa# /lugin JQuery Multiple-Select #i halaman
http:%%.en6hixin!net!cn%p%multiple-$elect atau
http:%%plugin$!,3uery!com%multiple!$elect%
Contoh Seerhana #enggunaan #lugin Multiple-Select
Seperti halnya plugin JQuery yang lainnya- plugin multiple-$elect mengharu$kan
pemanggilan library utama JQuery! Sementara itu untuk membuat obyek multiple
$elect- gunakan perintah 8TML bia$a- yaitu #engan tag C$electD #an CoptionD!
Jangan lupa untuk menambahkan atribut <2 pa#a tag C$electD $ebagai i#entita$ #an
$elector #i J3uery!
/erhatikan contoh $e#erhana program #emo 7& berikut ini:
emo$%php: Contoh Seerhana #enggunaan #lugin Multiple-Select
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>JQuery Multiple Select</title>
<script src="libs/jquery.min.js"></script>
<script src="libs/jquery.multiple.select.js"></script>
<link rel="stylesheet" href="libs/multiple-select.css"/>
<script>
$(document).ready(function(){
$('#demo1').multipleSelect();
});
</script>
</head>
<body>
<h1>JQuery Multiple Select Demo</h1>
<h2>Demo #1 : Contoh Sederhana</h2>
<form action="" method="post">
<h3>Multiple Combobox tanpa Plugin</h3>
<select id="demo1a" name="demo1a[]" multiple="multiple"
8alaman ( #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
style="width:200px">
<option value="JKT">DKI Jakarta</option>
<option value="BTN">Banten</option>
<option value="JABAR">Jawa Barat</option>
<option value="JATENG">Jawa Tengah</option>
<option value="JATIM">Jawa Timur</option>
<option value="DIY">DI Yogyakarta</option>
</select>
<h3>Multiple Combobox dengan Plugin JQuery
Multiple-Select</h3>
<select id="demo1" name="demo1[]" multiple="multiple"
style="width:200px">
<option value="JKT">DKI Jakarta</option>
<option value="BTN">Banten</option>
<option value="JABAR">Jawa Barat</option>
<option value="JATENG">Jawa Tengah</option>
<option value="JATIM">Jawa Timur</option>
<option value="DIY">DI Yogyakarta</option>
</select>
</form>
</body>
</html>
/en,ela$an /rogram 2emo & #i ata$:
Bari$ E : Menyertakan library JQuery! Se$uaikan #engan loka$i library JQuery
yang n#a gunakan! n#a ,uga #apat mengganti loka$i library
#engan C2" #ari J3uery yang beralamat #i
http:%%co#e!,3uery!com%,3uery!,$
Bari$ ' : Menyertakan plugin JQuery Multiple-Select
Bari$ B : Menyertakan +ile CSS plugin JQuery Multiple-Select! @ile CSS ini
ber+ung$i untuk mengatur tampilan #ari combobox!
Bari$ ?-&) : Memanggil +ung$i multipleSelect() tanpa op$i tambahan untuk
mengakti+kan plugin J3uery Multiple-Select pa#a obyek #engan <2
#demo1!
Bari$ &?-(' : /erintah 8TML untuk membentuk combobox multi-$elect! /erintah
ini akan menampilkan combobox #imana kita #apat memilih lebih
#ari $atu pilihan #engan menekan tombol Ctrl $aat memilih! <ngat-
untuk men,a#ikan $uatu combobox men,a#i multi-$elect- cukup
menambahkan atribut multiple=multiple pa#a tag C$electD!
Tanpa atribut ini- combobox akan #itampilkan $eperti combobox
pa#a umumnya 0hanya bi$a #ipilih & pilihan1
Bari$ (5-*E : Sama $eperti bari$ &?-('- menampilkan combobox multi-$elect!
Combobox yang ke#ua ini yang akan #itampilkan #engan plugin
J3uery Multiple-Select! Ban#ingkan ha$ilnya #engan combobox
pertama!
8alaman * #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
2an berikut ini tampilan #ari program #emo 7& #i ata$!
Multiple-Select engan #laceholer an 'ilter (#encarian)
Fita ,uga bi$a menambahkan beberapa op$i 0pilihan1 pa#a plugin ,3uery
multiple-$elect! Contohnya a#alah penambahan /lacehol#er #an +ilter 0pencarian1!
/lacehol#er merupakan keterangan yang muncul pa#a $uatu +orm inputan #an
akan hilang otomati$ $aat cur$or bera#a pa#a +orm inputan ter$ebut! Sementara
+itur pencarian $angat membantu pengguna untuk menemukan pilihan yang
#iinginkan- terutama #alam $ebuah combobox #engan ,umlah pilihan yang cukup
banyak!
/erhatikan contoh #emo 7( berikut ini!
emo&%php: Contoh Multiple-Select engan #laceholer an 'ilter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<title>JQuery Multiple Select</title>
<script src="libs/jquery.min.js"></script>
<script src="libs/jquery.multiple.select.js"></script>
<link rel="stylesheet" href="libs/multiple-select.css"/>
<script>
$(document).ready(function(){
$('#demo2').multipleSelect({
placeholder: "Pilih Propinsi",
filter:true
});
});
</script>
</head>
8alaman E #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
<h1>JQuery Multiple Select Demo</h1>
<h2>Demo #2 : Combobox dengan Placeholder dan Filter</h2>
<form action="" method="post">
<h3>Multiple Combobox tanpa Plugin</h3>
<select id="demo2a" name="demo2a[]" multiple="multiple"
style="width:200px">
<option value="JKT">DKI Jakarta</option>
<option value="BTN">Banten</option>
<option value="JABAR">Jawa Barat</option>
<option value="JATENG">Jawa Tengah</option>
<option value="JATIM">Jawa Timur</option>
<option value="DIY">DI Yogyakarta</option>
</select>
<h3>Multiple Combobox dengan Plugin JQuery
Multiple-Select</h3>
<select id="demo2" name="demo2[]" multiple="multiple"
style="width:200px">
<option value="JKT">DKI Jakarta</option>
<option value="BTN">Banten</option>
<option value="JABAR">Jawa Barat</option>
<option value="JATENG">Jawa Tengah</option>
<option value="JATIM">Jawa Timur</option>
<option value="DIY">DI Yogyakarta</option>
</select>
</form>
</body>
</html>
/rogram #i ata$ pa#a #a$arnya $ama $eperti program $ebelumnya 0#emo &1!
/erbe#aannya a#alah a#anya penambahan op$i pa#a $aat pemanggilan +ung$i
multipleSelect01 $eperti terlihat pa#a bari$ ?-&*! #a ( op$i yang #itambahkan yaitu
op$i :placehol#er; yang beri$i tek$ yang #itampilkan pa#a +orm- #an op$i :+ilter;
yang ,ika #ii$i #engan :true; maka akan ter#apat penambahan +orm untuk
pencarian #ata pa#a combobox! /erhatikan tampilan program berikut ini!
8alaman ' #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
Multiple-Select engan #ilihan yang !iambil ari MySQL
/a#a contoh $ebelumnya- op$i pa#a combobox #iatur lang$ung #i 8TML! /a#a
contoh berikut ini- kita akan coba mengi$i combobox #engan op$i yang #iambil #ari
#ataba$e MySQL! gar ti#ak terlalu rumit- kita akan menggunakan tabel :propin$i;
yang ter#iri #ari ( +iel# yaitu ko#e #an nama propin$i! Struktur tabel propin$i
$elengkapnya $ebagai berikut:
*+ *AMA ',-L! T,#- #A*JA*.
& ko#e 4archar (
( nama 4archar E)
Gunakan /8/My#min atau MySQL Client ke$ukaan n#a untuk mengimport
$truktur tabel propin$i be$erta i$inya #alam bentuk %/0l yang #apat #i#o.nloa# #i
bagian akhir tutorial ini!
Setelah tabel propin$i be$erta i$i #atanya telah $iap- $elan,utnya cobalah contoh
program emo1%php berikut ini!
emo1%php: Multi-Select engan #ilihan !iambil ari MySQL
1
2
3
4
5
<?php
#koneksi
$conn = mysqli_connect("localhost", "root", "qwerty", "demo");
#akhir-koneksi
8alaman B #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#ambil data propinsi
$query = "SELECT kode, nama FROM propinsi ORDER BY nama";
$sql = mysqli_query($conn, $query);
$arrpropinsi = array();
while ($row = mysqli_fetch_assoc($sql)) {
$arrpropinsi [ $row['kode'] ] = $row['nama'];
}
?>
<html>
<head>
<title>JQuery Multiple Select</title>
<script src="libs/jquery.min.js"></script>
<script src="libs/jquery.multiple.select.js"></script>
<link rel="stylesheet" href="libs/multiple-select.css"/>
<script>
$(document).ready(function(){
$('#demo3').multipleSelect({
placeholder: "Pilih Propinsi",
filter:true
});
});
</script>
</head>
<body>
<h1>JQuery Multiple Select Demo</h1>
<h2>Demo #3 : Combobox dengan Placeholder dan Filter</h2>
<form action="" method="post">
<select id="demo3" name="demo3[]" multiple="multiple"
style="width:300px">
<?php
foreach($arrpropinsi as $kode=>$nama) {
echo "<option value='$nama'>$nama</option>";
}
?>
</select>
<input type="submit" name="Pilih" value="Pilih"/>
</form>
<?php
if(isset($_POST['Pilih'])) {
echo "Propinsi yang Anda pilih: <br/>";
echo implode(", ", $_POST['demo3']);
}
?>
</body>
</html>
/a#a contoh program yang ketiga #iata$- ter#apat beberapa penambahan co#e ,ika
#iban#ingkan #engan program $ebelumnya! /ilihan pa#a combobox ti#ak lagi
#ituli$kan #i #alam program $ecara lang$ung 08TML1- tetapi #iambil #ari tabel
8alaman 5 #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
propin$i yang bera#a #i #ataba$e MySQL! Berikut ini pen,ela$an $ingkat #ari
program #i ata$!
Bari$ * : /ertama program akan melakukan konek$i ke #ataba$e MySQL!
2i$ini kita menggunakan +ung$i mysqli_connect() yang memiliki
E 0empat1 parameter- yaitu ho$tname- u$ername- pa$$.or# #an
nama #ataba$e yang #igunakan!
Bari$ B-&( : Mengambil #ata propin$i #i tabel propin$i #an mema$ukkannya ke
#alam 4ariabel array $arrpropinsi! /erintah 3uery yang
#igunakan a#alah ,eni$ perintah S=L=CT #an untuk men,alankan
perintah 3uery ter$ebut #igunakan +ung$i mysqli_query()!
Sementara itu- +ung$i mysqli_fetch_array() pa#a bari$ &)
#igunakan untuk menangkap ha$il perintah 3uery #an
mema$ukkannya ke #alam array!
Bari$ (&-(B : Memanggil +ung$i multipleSelect() #engan op$i placehol#er
#an +ilter- untuk mengakti+kan plugin J3uery Multiple-Select pa#a
obyek #engan <2 #demo3!
Bari$ *'-*9 : Menampilkan $eluruh i$i array $arrpropinsi ke #alam op$i
combobox! Untuk menampilkannya menggunakan bentuk
perulangan khu$u$ foreach!
Bari$ E*-E? : Saat tombol #ilih #itekan- /8/ akan menangkap pilihan combobox
yang #ipilih #an menampilkannya #i layar!
Berikut ini tampilan ha$il program emo1%php #i ata$!
2e/impulan
/lugin JQuery Multiple-Select merupakan $alah $atu plugin yang cukup han#al
untuk :mempercantik; tampilan combobox $ehingga lebih nyaman #ari $i$i
pengguna! Beberapa kelebihan yang #ita.arkan oleh plugin ini antara lain
kemu#ahan #alam implementa$inya- $erta #ukungan berbagai op$i % pilihan $eperti
placehol#er #an pencarian 0+ilter1!
8alaman ? #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
!o"nloa
Tutorial ini ,uga telah #ipublika$ikan #i $itu$ chmatim!"et:
http:%%achmatim!net%()&*%)5%&'%,3uery-multiple-$elect-combobox-untuk-tampil
an-combobox-yang-lebih-baik%
2o.nloa# $ource-co#e lengkap #i http:%%achmatim!net%#o.nloa#%'(%
Semoga tutorial ini berman+aat untuk kita $emua #an berbagilah hal baik ke
$ebanyak-banyaknya orang maka kebahagiaan akan menghampiri n#a! Satu Farya
untuk <n#one$iaH
3e4eren/i Terkait
J3uery Multiple-Select http:%%plugin$!,3uery!com%multiple!$elect%
Ariginal J3uery Multiple-Select http:%%.en6hixin!net!cn%p%multiple-$elect%
Tentang #enuli/
Achma Solichin% #alah Lulu$an Teknik <n+ormatika- @akulta$
Teknologi <n+orma$i - Uni4er$ita$ Bu#i Luhur- Jakarta 0S&- ())'1 #an
Magi$ter Teknologi <n+orma$i- Uni4er$ita$ <n#one$ia 0S(- ()&)1! Saat
ini $e#ang menempuh program 2oktoral #alam bi#ang <lmu
Fomputer #i Uni4er$ita$ Ga#,ah Ma#a- Jog,akarta! Fegiatan
$ehari-hari a#alah $ebagai 2o$en #i Uni4er$ita$ Bu#i Luhur
0http:%%...!bu#iluhur!ac!i#1! Fegiatan lain akti+ $ebagai programmer-
.eb #e4eloper- $y$tem analy$t- kon$ultan #an memberikan pelatihan
#i berbagai bi#ang komputer $erta membuat tutorial-tutorial prakti$ #i bi#ang
komputer! /enuli$ memiliki $itu$ utama #i http:%%achmatim!net yang beri$i berbagai
tutorial prakti$ #i bi#ang komputer $erta menye#iakan buku grati$ komputer!
/enuli$ #apat #ihubungi melalui email #i achma#!$olichinIbu#iluhur!ac!i# #an
achmatimIgmail!com- JM achmatim- @acebook achmatim #an T.itter Iachmatim!
Li/en/i !okumen
Seluruh i$i #alam #okumen ini #apat #igunakan- #imo#i+ika$i #an
#i$ebarlua$kan $ecara beba$ untuk tu,uan pen#i#ikan-
pembela,aran #an bukan komer$ial 0non pro+it1- #engan $yarat ti#ak
menghilangkan- menghapu$ atau mengubah atribut penuli$ #okumen ini #an
pernyataan #alam li$en$i #okumen yang #i$ertakan #i $etiap #okumen! Ti#ak
#iperbolehkan mengkomer$ialkan tutorial ini kecuali men#apatkan i,in terlebih
#ahulu #ari penuli$!
8alaman 9 #ari 9