jQuery Combo box multi column

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

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!