Terinspirasi dari Blog Sobat isoweb yang telah lebih dahulu membuat Combo multi column akan tetapi beliau menggunakan extjs sebagai pengimplementasiannya (Mbahsomo), dibuat sedikit berbeda dan Sesimple mungkin. Simple bukan berarti jelek loh Smile tapi mudah dibuat dan ringan karena saya menggunakan jquery sebagai framework dan juga sudah mendukung cross platform, Combo multi column yang saya buat masih manual bila mau melakukan modifikasi saya persilahkan. OK langsung ke proses pembuatannya saja ya...

1. Buat File html beri nama index.html isikan kode berikut dibawah 

 

<html>

<head>

<title>jquery Combo Multi column</title>

<meta name="author" content="qu4cks0ft">

<meta name="robots" content="all">

<link rel="stylesheet" href="style.css" type="text/css" /> // CSS yang saya digunakan

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> // Menggunakan jquery online dari google

<script src="./combo_multicolumn.js"></script> // javascript combo multi column

</head>

<body>

<div id="container">

<div class="header">

<h2>Combo Multi Column</h2>

</div>

<form action="" method="post" name="frm_button" class="form" id="frm_button">

<div class="form_row">

           <label class="name">

               NIM :

           </label>

                           // Konsen trasikan pada code dibawah

           <div class="combo_group" id="combo_group">

<input type="text" name="nim" id="nim" readonly class="main_input" />

<a href="#" class="btn_arrow" id="btn_arrow"></a>

<div id="show_multicombo" class="show_multicombo"></div>

           </div>

   <div class="clear"></div>

                          // akhir dari combo

       </div>

      <div class="form_row">

           <label class="name">

               Nama anda :

           </label>

           <input type="text" name="nama" id="nama" class="main_input" />

       </div>

       <div class="form_row">

           <label class="name">

               Email :

           </label>

           <input type="text" name="email" id="email" class="main_input" />

       </div>

</form>

</div>

</body>

</html>

 

2. Buat file javascript beri nama isoweb_dev.js isikan seperti dibawah

 

$(function(){ // Awal penulisan javascript atau bisa diganti $(document).ready(function(){});

    $('tr#rows').live('click',function(event){ // ketika satu baris combo di klik

        var nim = $(this).attr('key'); // tentukan isi dari Attribut Key

        $("#nim").val([nim]); // isi kan Value nim pada Textbox dengan id nim

    });

 

    $("#btn_arrow").click(function(e){ // ketika Tombol combo di klik

        e.preventDefault();

        $.ajax({ // Menjalankan Ajax baca artikel sebelumnya untuk memperjelas Implementasi Ajax

             url : "data.json" // Data json yang saya baca dari proses ajax

            ,type : "get" // Method Get yang saya pakai untuk Ajax

            ,dataType : "json" // Tipe Json untuk data encodenya

            ,success : function(data){ // bila Respon dari json sukses jalankan proses dibawah

                var combo = "<table name=\"list_combo\" cellpadding=\"2\" cellspacing=\"2\">"; // Menggunakan Table untuk list data Combo box

                $.each(data,function(k,v){ // Loop sebanyak data yang ada pada Json

                    combo +="<tr id=\"rows\" key=\""+v.id+"\"><td>"+v.id+"</td><td>"+v.name+"</td></tr>"; // Data yang diambil dari Json

                });

                combo +="</table>"; // akhir dari list data

                $("#show_multicombo").html(combo).fadeIn(); // Tampilkan data diatas pada website

            }

            ,error : function(respons, error){ // Bila Respon dari json gagal jalankan proses dibawah

                alert("Tidak dapat dikerjakan karena "+ error);

            }

        });

        return false;

    });

    $("body #container").click(function(){ // jika pada area Container di klik jalankan proses dibawah

        $("#show_multicombo").fadeOut(); // Hilangkan Multi combo yang sedang tampil saat ini.          });    

});

3. Buat file data.json untuk Respon dari ajax isikan seperti dibawah

 

[{"id":"1222","name":"Benny dolo"},{"id":"1223","name":"Rachmad Darmawan"}] // Sengaja meggunakan Nama - nama pelatih dari Timnas Indonesia Heeee

 

Berikut Hasil dari code diatas bila kalian ikuti proses diatas :

 

Bagaimana Simple sekali bukan Tampilan dan juga Code Javascriptnya.

 

Semoga bermanfaat.

 

DEMO | DOWNLOAD