Bogger semua pada kesempatan ini saya mau sharing cara membuat dual list box mengunakan HTMl dan JQuery. Dual list box ini biasanya kita jumpai ketika ada pemilihan yang lebih dari satu, seperti pemilihan employee dan lain sebagainya.
Untuk pembuatannya saya tidak seutuhnya membuat code sendiri, tetapi saya mengunakan library dari link berikut :
http://www.senamion.com/blog/jmultiselect2side.html
Silahkan anda download terlebih dahulu dari link diatas.Namun sayangnya library ini sudah tidak dikembangkan lagi dan hanya support sapai JQuery Versi 1.5 untuk versi diatasnya tidak support. Untuk link JQuery anda bisa mengunakan link berikut :
https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
Untuk Struktur filder pembuatannya kira-kira sebagai berikut
Kita cukup membuat satu file HTML dengan nama index.html untuk lib kita isi dengan jquery dan jmultiselect2side.
Code lengkap untuk file index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Multi Select To Side</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.multiselect2side.js" ></script>
<link rel="stylesheet" href="lib/jquery.multiselect2side.css" type="text/css" media="screen" />
<script type="text/javascript">
$().ready(function() {
$('#second').multiselect2side({
selectedPosition: 'right',
moveOptions: false,
labelsx: '',
labeldx: '',
autoSort: true,
autoSortAvailable: true
});
});
</script>
</head>
<body>
<h3>Data Employee</h3>
<table>
<tr>
<td>Employee Id :</td>
<td><input type="text" name="emp_id"></td>
</tr>
<tr>
<td valign="top">Employee :</td>
<td>
<select name="searchable[]" id='second' multiple='multiple'">
<option value="001">Asep komarudin</option>
<option value="002">Ijal Maulana</option>
<option value="003">Rudi Sujarwo</option>
<option value="004">kafi Mohak</option>
<option value="005">Yusuf Satriadi</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Hasil keluarannya adalah sebagai berikut :
Klik Tombol Dibawah Untuk Memunculkan Link Download :
Tutorial Cara Download File :
Jika ada pertanyaan silahkan input pada kolom komentar...
2 comments
Thanks buat tutorial berbaginya, saya ingin mencobanya namun saya ingin bertanya terlebih dahulu. Apakah ini dapat diimplementasikan di Yii2?
Terimakasih.
Bisa saja, tinggal kita mau taruh dimana form inputnya, tergantung kebutuhan.
EmoticonEmoticon