Memindahkan item combo box dengan jQuery

Pada saat kita membuat aplikasi laporan yang dapat disesuaikan dengan kebutuhan pengguna aplikasi kita, kita mungkin akan menyediakan field atau kolom apa saja yang dapat dimunculkan dalam laporan yang akan dibuat untuk kepentingan pengguna. Sebagai contoh kita mungkin akan membuat tampilan seperti di bawah ini:

Pada contoh di atas ada kolom yang tersedia di sebelah kiri dan juga pada bagian kanan berisi kolom yang akan ditampilkan. Dari tampilan di atas kita ingin memindahkan item-item yang ada di sebelah kiri ke sebelah kanan sesuai dengan kebutuhan kita.

Berikut langkah-langkah program pemindahan item dengan combo box HTML dan jQuery

Pertama-tama kita membuat combo box kiri dengan select seperti berikut ini:
    <select id=”kiri” multiple size=”7″ name=”kiri” style=”width: 200px;”>
   <option value=’nama’>Nama</option>
   <option value=’alamat’>Alamat</option>
   <option value=’sekolah’>Sekolah</option>
   <option value=’kota’>Kota</option>
   <option value=’propinsi’>Propinsi</option>
   <option value=’umur’>Umur</option>
   <option value=’tgllahir’>TglLahir</option>
   </select>
Keyword multiple digunakan untuk menandai dapat memilih banyak.
Keyword size digunakan untuk tinggi dari comboboz select ini.
Kemudian kita akan membuat combobox select di sebelah kanan seperti berikut ini:
<select id=”kanan” multiple size=”7″ name=”kanan[]” style=”width: 200px;”>
</select>
Untuk name kita menggunakan array supaya nanti bisa diproses di PHP dengan array juga.
Javascript untuk memindahkan item:
    function pindahSemua(asal, tujuan) {
        $(‘#’+asal+’ option’).remove().appendTo(‘#’+tujuan);
    }

    function pindahItem(asal, tujuan) {
        $(‘#’+asal+’ option:selected’).remove().appendTo(‘#’+tujuan);
    }
Javascipt untuk memilih semua bagian kanan dan juga submit:
    function kirim() {
        $(“#kanan option”).attr(“selected”,”selected”);
       $(“#formku”).submit();
Button untuk memindahkan item:
       <button type=”button” OnClick=”pindahSemua(‘kiri’, ‘kanan’)”>>></button> <br/>
        <button type=”button” OnClick=”pindahItem(‘kiri’, ‘kanan’)”>></button> <br/>
        <button type=”button” OnClick=”pindahItem(‘kanan’, ‘kiri’)”><</button> <br/>
        <button type=”button” OnClick=”pindahSemua(‘kanan’, ‘kiri’)” href=”#”><<</button> <br/>
Button untuk submit:
<button type=”button” onClick=”kirim()”>Kirim</button>
Source lengkapnya:
<html>
<head>
<title>Pindahkan Item</title>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
   <script>
    function pindahSemua(asal, tujuan) {
        $(‘#’+asal+’ option’).remove().appendTo(‘#’+tujuan);
    }

    function pindahItem(asal, tujuan) {
        $(‘#’+asal+’ option:selected’).remove().appendTo(‘#’+tujuan);
    }

   function kirim() {
        $(“#kanan option”).attr(“selected”,”selected”);
       $(“#formku”).submit();
    }
    </script>
</head>
<body>
<form method=”POST” action=”pindah_ya.php” id=”formku”>
<table>
<tr>
   <td>Kolom Tersedia:</td>
   <td></td>
   <td>Kolom akan ditampilkan:</td>
</tr>
<tr>
<td>
   <select id=”kiri” multiple size=”7″ name=”kiri” style=”width: 200px;”>
   <option value=’nama’>Nama</option>
   <option value=’alamat’>Alamat</option>
   <option value=’sekolah’>Sekolah</option>
   <option value=’kota’>Kota</option>
   <option value=’propinsi’>Propinsi</option>
   <option value=’umur’>Umur</option>
   <option value=’tgllahir’>TglLahir</option>
   </select>
</td>
<td>
       <button type=”button” OnClick=”pindahSemua(‘kiri’, ‘kanan’)”>>></button> <br/>
        <button type=”button” OnClick=”pindahItem(‘kiri’, ‘kanan’)”>></button> <br/>
        <button type=”button” OnClick=”pindahItem(‘kanan’, ‘kiri’)”><</button> <br/>
        <button type=”button” OnClick=”pindahSemua(‘kanan’, ‘kiri’)” href=”#”><<</button> <br/>
</td>
<td>
<select id=”kanan” multiple size=”7″ name=”kanan[]” style=”width: 200px;”>
</select>
</td>
</tr>
</table>
<button type=”button” onClick=”kirim()”>Kirim</button>
</form>
</body>
</html>
Source code untuk PHP processingnya:
<?php
echo “<pre>”;print_r($_POST);echo “</pre>”;
?>
Demo dapat dilihat di http://aris.proweb.asia/pindah_item.html dengan tampilan seperti berikut ini

Informasi lebih lanjut silahkan mengunjungi http://www.altafweb.com/2013/12/move-list-box-items-from-one-box-to.html .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Memindahkan item combo box dengan jQuery