http://harviacode.com/2015/05/19/membuat-select-dengan-select2/
http://fajriscode.blogspot.co.id/2014/01/select2-dengan-jquery.html
http://www.adiputra.web.id/multiple-input-dengan-select2-dan-codeigniter/
http://copas89.blogspot.co.id/2015/09/combox-dinamis.html
https://select2.github.io/http://achmatim.net/2013/07/15/jquery-multiple-select-combobox-untuk-tampilan-combobox-yang-lebih-baik/
Kali ini saya akan berbagi tentang bagaimana membuat select dengan
select2. Kita bisa membuat input select kita menjadi lebih bagus dengan menggunakan select2.js.
Bila kita memiliki input select tentu pilihan yang ditampilkan ketika
kita mulai mengetik adalah dari option yang memiliki huruf yang sama di
paling kiri. Misalnya dalam select ada option ‘Jakarta’, ‘Tangerang’,
‘Yogyakarta’. Kita ketika ‘ta’ pada select maka akan muncul Tangerang.
Bila user tidak ingat nama kotanya hanya ingat kotanya mengandung kata
‘ta’, maka daftar kota yang lain tidak akan muncul. Dengan select2, hal
tersebut bisa dihindari sehingga lebih memudahkan user.
Select2 memiliki banyak sekali pilihan, misalnya untuk grouping
option, tagging, multiselect, ajax select dan lain-lain. Dalam contoh
ini saya hanya membuat yang paling sederhana.
Penggunaan lain seperti pada gambar di awal artikel ini. Dimana saya gunakan untuk alamat tujuan pengiriman mail ke banyak user.
Berikut ini adalah kodenya. Anda cukup menambahkan id pada select dan
memanggil id tersebut dengan select2 pada javascriptnya. Tentu anda
harus memanggil select2 js, select css dan jquery.
1
2
3
4
5
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
51
52
53
54
55
|
<!doctype html>
<html>
<head>
<title>Select2 - harviacode.com</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="select2.min.css"/>
</head>
<body>
<div style="width: 300px; padding: 15px">
<div class="form-group">
<label>Kota Kelahiran</label>
<select id="kota" name="kota" class="form-control">
<option value=""></option>
<option value="Jakarta">Jakarta</option>
<option value="Bogor">Bogor</option>
<option value="Depok">Depok</option>
<option value="Tangerang">Tangerang</option>
<option value="Bekasi">Bekasi</option>
<option value="Bandung">Bandung</option>
<option value="Semarang">Semarang</option>
<option value="Yogyakarta">Yogyakarta</option>
<option value="Surabaya">Surabaya</option>
</select>
</div>
<div class="form-group">
<label>Kota Favorit</label>
<select id="kota2" name="kota2[]" class="form-control" multiple="multiple">
<option value=""></option>
<option value="Jakarta">Jakarta</option>
<option value="Bogor">Bogor</option>
<option value="Depok">Depok</option>
<option value="Tangerang">Tangerang</option>
<option value="Bekasi">Bekasi</option>
<option value="Bandung">Bandung</option>
<option value="Semarang">Semarang</option>
<option value="Yogyakarta">Yogyakarta</option>
<option value="Surabaya">Surabaya</option>
</select>
</div>
</div>
<script src="jquery-1.11.2.min.js"></script>
<script src="select2.min.js"></script>
<script>
$(document).ready(function () {
$("#kota").select2({
placeholder: "Please Select"
});
$("#kota2").select2({
placeholder: "Please Select"
});
});
</script>
</body>
</html>
|
0 Response to "Membuat select dengan select2"
Post a Comment