Pada artikel kali ini saya akan membahas plugin jquery yaitu Membuat Select Option Lebih Menarik Dengan Select2.js, Kita bisa membuat input select kita menjadi lebih bagus dengan menggunakan select2.js.
Membuat select option biasanya kita hanya mengandalkan HTML Dan untuk styling nya menggunakan CSS biasa , kali ini kita akan membuat yang agak sedikit berbeda dengan bantuan menggunakan jquery plugin yaitu select2.js.
Kita juga akan membuat select option yang bisa memasukan inputan lebih dari sati seperti saat mengirim email di gmail, bagaima cara membuatnya langsung saja kita memulainya.
sebelum kita membuat HTML nya kita harus download dahulu jquerynya , bisa di download 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>
Untuk 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 pada browser, dan lihat hasilnya:
JIka di lihat maka tampilanya sedikit berbeda dan di tambahkan fungsi untuk membuat multi input, baiklah itu saja dari saya, semoga bermanfaa dan sampai bertemu pada artikel selanjutnya.
The post Membuat Select Option Lebih Menarik Dengan Select2.js appeared first on Kursus Website Terbaik.