Membuat Select Option Lebih Menarik Dengan Select2.js
Di artikel kali ini saya akan membahas plugin jquery yaitu Merancang Select Option Lebih Menarik Dengan Select2.js, Kita dapat merancang input select kita menjadi lebih bagus dengan menggunakan select2.js.
Merancang select option biasanya kita hanya mengandalkan HTML Dan bagi styling nya menggunakan CSS lazim , kali ini kita akan merancang yang agak sedikit berbeda dengan bantuan menggunakan jquery plugin yaitu select2.js.
Kita pun akan merancang select option yang dapat memasukan inputan lebih dari sati seperti dikala mengirim email di gmail, bagaima cara membuatnya seketika saja kita memulainya.
sebelum kita merancang HTML nya kita mesti unduh dahulu jquerynya , dapat di unduh DISINI
<!doctype html>
<html>
<head>
<title>Select2</title>
<link rel=stylesheet type=text/css href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
<link rel=stylesheet href=select/dist/css/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>
</body>
</html>
Bagi mamsukan javascriptnya seperti ini :
<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”select/dist/js/select2.min.js”></script>
<script>
$(document).ready(function () {
$(“#kota”).select2({
placeholder: “Please Select”
});
$(“#kota2”).select2({
placeholder: “Please Select”
});
});
</script>
setelah selesai, silahkan di jalankan di browser, dan lihat hasilnya:
JIka di lihat karenanya tampilanya sedikit berbeda dan di tambahkan kegunaan bagi merancang multi input, baiklah itu saja dari saya, semoga bermanfaa dan hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
