Chained DropDown dengan Jquery dan Codeigniter

158 Replies

*gambarnya aneh 😀

Selamat datang kembali, yeah… setelah kemarin pusing dengan aktifitas di tempat kerja, akhirnya bisa refreshing lagi, kangen-kangenan lagi dengan Codeigniter dan JQuery. Rencananya sih pengen nyoba yang 2.0, tapi nanggung ah, masih pake yang versi lama dulu.

Beberapa waktu lalu sempat ditanyain cara buat dropdown yang nyambung (istilahnya banyak sih), ada pula yang kasih istilah Sub Dropdown. Yaitu select/dropdown 1 yang kalo dipilih, nanti dropdown 2 listnya akan berubah sesuai kategori di dropdown 1. Contoh sederhananya ya ketika milih propinsi, maka dorpdown 2 akan muncul pilihan kota sesuai propinsi di drodown 1 (kaya di skrinsut 😀 ).

Karena saya biasa pake CI, ya wes langsung ta buat aja..

Controller :

[php]
<?php
class Chain extends Controller{

function __construct(){
parent::Controller();
$this->load->model(‘MChain’);
}

function index(){

$data[‘option_propinsi’] = $this->MChain->getPropinsiList();
$this->load->view(‘chain/index’,$data);
}

function select_kota(){
$data[‘option_kota’] = $this->MChain->getKotaList();
$this->load->view(‘chain/kota’,$data);
}
}
?>
[/php]

Dua function, yang pertama index, untuk menampilkan halaman awalnya, kemudian select_kota itu dijalankan lewat ajax untuk memanggil dropdowon dua yang isinya kota sesuai propinsi pada dropdown pertama.

Model :

[php]
<?php
class MChain extends Model{
function __construct(){
parent::Model();
}

function getPropinsiList(){
$result = array();
$this->db->select(‘*’);
$this->db->from(‘propinsi’);
$this->db->order_by(‘propinsi’,’ASC’);
$array_keys_values = $this->db->get();
foreach ($array_keys_values->result() as $row)
{
$result[0]= ‘-Pilih Propinsi-‘;
$result[$row->propinsi_id]= $row->propinsi;
}

return $result;
}

function getKotaList(){
$propinsi_id = $this->input->post(‘propinsi_id’);
$result = array();
$this->db->select(‘*’);
$this->db->from(‘kota_kabupaten’);
$this->db->where(‘propinsi_id’,$propinsi_id);
$this->db->order_by(‘kota_kabupaten’,’ASC’);
$array_keys_values = $this->db->get();
foreach ($array_keys_values->result() as $row)
{
$result[0]= ‘-Pilih Kota / Kabupaten-‘;
$result[$row->kota_id]= $row->kota_kabupaten;
}

return $result;
}

}
?>
[/php]

Dua fungsi yang hampir sama, sama-sama memanggil isi dari tabel, kemudian ditampilkan sebagi list pada dropdown. Kalo fungsi yang kedua, itu ditambah statement where, sesuai kategori propinsi yang dipilih.

View :
Saya buat dua view, yang pertama untuk halaman depannya, kemudian yang kedua adalah untuk menampilkan dropdown dua untuk kota/kabupaten. Viewnya sebagai berikut :
index.php

[php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chain Select With Codeigniter and Jquery</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/ css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!– page content –>
<div id="propinsi" style="width:250px;float:left;">
Propinsi : <br/>
<?php
echo form_dropdown("provinsi_id",$option_propinsi,"","id=’propinsi_id’");
?>
</div>
<div id="kota">
Kota / Kabupaten :<br/>
<?php
echo form_dropdown("kota_id",array(‘Pilih Kota / Kabupaten’=>’Pilih Propinsi Dahulu’),”,’disabled’);
?>
</div>
<script type="text/javascript">
$("#propinsi_id").change(function(){
var propinsi_id = {propinsi_id:$("#propinsi_id").val()};
$.ajax({
type: "POST",
url : "<?php echo site_url(‘chain/select_kota’)?>",
data: propinsi_id,
success: function(msg){
$(‘#kota’).html(msg);
}
});
});
</script>
</body>
</html>
[/php]

kota.php

[php]
Kota / Kabupaten :<br/>
<?php
echo form_dropdown("kota_id",$option_kota,”);
?>
[/php]

Prosesnya adalah di view index.php, dropdown pertama diberikan sebuah id, kemudian id tersebut dipanggil dengan jquery, dengan menambahkan parameter value yg dipilih. Kemudian memanggil controller select_kota, memanggil model getKotaList sesuai paramater pada dropdown propinsi, lalu hasilnya akan diletakkan pada div kota. Begitulah kira-kira langkahnya 🙂

Source nya ada di sini

Ada beberapa bugs ketika saya coba, ketika di coba di localhost. semua berjalan lancar, tetapi ketika saya coba upload di hosting, ternyata scriptnya jadi ga jalan.. POST nya ga bisa dikirim oleh jquery… aneh.. ada yang bisa nemu erorrnya??

30-03-2011 : Pagi ini saya upload ulang filenya, dan tiba-tiba bisa jalan di servernya. Coba di cek deh http://dudu.web.id/ci_ku/index.php/chain ga tau kenapa..

Oh ya, unttuk databasenya saya download dari sini, thx to mas @matriphe

158 thoughts on “Chained DropDown dengan Jquery dan Codeigniter”

  2. Fizah

    Mas uda dicoba itu juga..ni code yang saya bikin..

    <link rel="stylesheet" href="jqgrid/jquery-ui.css’;?>” type=”text/css” media=”all” />
    <link rel="stylesheet" href="jqgrid/ui.theme.css’;?>” type=”text/css” media=”all” />
    <script src="jqgrid/jquery.min
    .js” type=”text/javascript”>
    <script src="jqgrid/jquery-ui.min.js” type=”text/javascript”>

    Nah, ini yang setelah di CTRL+U, Hrefnya gini..

    href=”http://localhost/SIA/jqgrid/jquery-ui.css’;?>”
    href=”http://localhost/SIA/jqgrid/ui.theme.css’;?>”

    Kira2 salah apa lagi ya??
    ui.theme.css, jquery.min.js, dan namafile jqueri lainnya itu di donlod.. Bingung mas salahnya dimana lagi, padahal semuanya uda sesuai..
    Jadinya stuck..
    Please Help.. TT

    Reply ↓
  3. Fizah

    Mas via email ya..
    Codenya di copiiin kesini jadi rubah2..

    Tolongin ya mas..
    Stuck ni,, jadi gabisa ngerjain yang lainnya..

    Mudah2an mas mau berkenan melihatnya..
    🙂
    #mukamemelas

    Reply ↓
  8. qriez

    bukan nanti orang mau mencari produk dengan memilih dengan dropdown jika memilih produk A maka di bawahnya ada A1 terus dibawahnya ada submit cari..aplikasinya gmn ya??

    Reply ↓
  9. ariez

    iya udah itu..tapi dipencariannnya belum berhasil karena yg dibaca misal kota A kode 01 di pencarian kota A itu kebaca 01 modelnya gmn??
    ini contoh modelnya

    function getpropinsiList(){
    $id_kat_propinsi = $this->input->post(‘id_kat_propinsi ‘);
    $result = array();
    $this->db->select(‘*’);
    $this->db->from(‘propinsi);

    $this->db->order_by(‘name’,’ASC’);
    $array_keys_values = $this->db->get();
    foreach ($array_keys_values->result() as $row)
    {
    $result[0]= ‘-Pilih Propinsi-‘;
    $result[$row->id_kat_propinsi]= $row->name;

    }

    return $result;
    }

    Reply ↓
  10. ariez

    Kalau buat fasilitas pencarian pake chaiin select gmn codingnya?
    misal kita cari produk A nanti dibawahnya produk A1
    saya dah bs buat chaiinnya tp ketika submit hasil pencariannya blm bs..
    nanti pengennya di pencarian hasilnya “pencarian A produk A1:”
    sementara ini untuk A kebaca id ex 01.. jadi hasilnya “pencarian 01 produk A1:”

    Reply ↓
  11. mjy

    Mas dudu,

    saya sudah bikin, tapi untuk cild combonya kok masih disable ya? kira2 kenapa? apa Jquerynya? ato gimana? Saya juga masih raba2 mengenai CI. Jquery sudah saya copy dilocal hasilnya juga tetap.

    Salam

    Reply ↓
  12. ariez_zip

    udah bs tanpa harus merubah 01 ke A
    kalau $ is not defined
    $(“#category_id”).change(function(){
    itu kurang apanya??

    Reply ↓
  15. muzlih

    mas kasih tutornya dong view hasil simpanan dari database nya. ak bingung nih gimana ngambil data nama kotanya. saya cuma dapat menampilkan id kotanya mas, mungkin mas Dudu terhormat bisa ngasih caranya ngejoint atau apa biar hasilnya keluar. saya sudah bisa sampai menyimpan ke dlm databasenya dan melakukan join pada provinsi untuk menampilkan nama provinsinya . sedangkan kotanya masih berbentuk id saja. Mohon pencerahannya

    Reply ↓
  16. Anjieya

    Aku balik lagi kak dudu….
    itu kan jquerynya pake yang 1.4 ya?
    nah kalau jquerynya upgrade ke 1.7 kok ga jalan lagi ya?
    kan klo di 1.4 pake yg seperti mas dudu saranin berhasil dengan baik, aku juga bikin tutorialnya karena ada yg nanyatriple chained dropdown
    trus kalau jquery v 1.7 gimana ya?
    aku bikinnya cuma ganti ke
    $(“#propinsi_id”).on(“change”,function(){ <—tapi gak jalan
    trus yg .delegate() juga dah diganti .on() di jquery 1.7.
    karena aku pake pyrocms v.2 dan jquerynya dah 1.6.4, jadi yg kode lama gak berfungsi.
    bisa bantu lagi?
    terima kasih….

    Reply ↓
  17. Chan_uchi

    mas, mau nanya,,, bisa gak kita mengisi textbok secara dinamis sesuai pilihan di list/combobox tampa menggunakan jquery? gini mas misalnya kita mengambiil data dari tabel dan kita tampilkan menjadi pilihan di combobox ( sama kayak cotoh yang mas yang dia artikel ini) tapi disini maksud saya yang kita tampilkan bukan combobox tapi text box sesui primaryke yang kita pilih pada combobok tersebut. mohon pencerahannya mas, kalu mas berkenan secepatnya. saya tunggu ya mas.

    Reply ↓
    1. dwijonarko

      Masukan dalam parameter data untuk data yang akan di kirimkan / submit. Dalam kode anda, yang dikrimkan hanya data: id_jenis,kalo yang dimaksud adalah travo, ya silahkan di sesuaikan

      Reply ↓
    1. dwijonarko

      var id_jenis = { id_jenis:$(“#id_jenis”).val(),
      id_bay:$(“#id_bay”).val(),
      id_trafo:$(“#id_trafo”).val()
      };

      untuk mengirimkan parameter id_jenis, id_bay, id_trafo. Kalo code Anda tadi hanya var id_jenis = {id_jenis:$(“#id_jenis”).val()}; ya jelas saja hanya mengirimkan id_jenis saja

      Reply ↓
  20. Newbie Robenx

    Sebenernya sudah jadi mas dropdown nya jadi setiap jenis trafo akan meload trafo dan objek pengukuran sudah jadi tetapi setelah di klik submit untuk mengambil dari action tidak bisa hanya  id_jenis saja yang masuk 

    Reply ↓
  28. Guest

    Mas aku coba jalanin contoh diatas udah berhasil dan aku menambahkan fungsi get data dari database (untuk menampilkan semua data) juga udah berhasil. Namun saat aku menambahkan fungsi CREAD, feedback nya kok 0 ya, yg seharusnya nilainya sesuai dengan inputan, apakah code diatas tidak bisa ditambahkan fungsi CRUD? mohon pencerahannya mas dudu….
    Terima Kasih.

    Reply ↓
  29. Kuere Angel

    pagi gan, numpang tanya nih gan itu saya sudah mengikuti prosedur nya si agan namun kok yg bagian kota gk bisa ke load dan tidak ada pemberitahuan error nya itu kenapa ya gan? mohon bantuannya ya gan 🙁

    Reply ↓
  30. fadil

    mas mau tanya , sudah saya coba , tetapi kok form dropdown untuk kabupaten/kota nya tidak muncul ya setalah dipilih provinsi nya ? source nya sudah sama kok . mohon pencerahan nya mas . saya masih newbie soalnya hehe untuk tugas PA . terima kasih

    Reply ↓
    1. dudu Post author

      tentunya script Anda tidak bisa saya koreksi kalau saya tidak melihatnya. Silahkan periksa menggunakan firebug atau developers tools milik chrome, apakah prses ajaxnya sudah benar,memanggil databasenya juga sudah benar dll

      Reply ↓
  32. ardin

    Om Dudu, klo tigal combo box bagaimana ya?saya coba tambahkan untuk kecamatan dengan isi table:

    propinsi_id | kabupaten_id | kecamatan_id | kecamatan

    Tapi untuk kecamatannya nda keluar atau masih disable, cuman keluar sampai kabupaten, padahal saya sudah tulis ulang function di tiap2 file yang konek ke controller (chain) untuk kecamatan tp nda mudenk scriptnya alias kecamatan nda di anggap.

    Ada solusinya nda om?Tolong bantuannya om…terima kasih.

    Reply ↓
  34. Dini Wulandari

    Thanks Mas Dudu, tutorialnya berjalan dengan lancaar caar caar bantu banget buat skripsi nih. semoga pas di upload ke hosting ga masalah hehehehe 🙂

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.