Monday, October 17, 2016

Membuat Dual List Box Dengan HTML dan Jquery

Tags


Assalamualaikum Wr. Wb....
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 :

Selamat mencoba......
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