Membuat Combobox Dinamis dengan CI dan Ajax

Jan 17, 2011   //   by anggie   //   Ajax, CodeIgniter, JQuery, PHP  //  53 Comments

Combobox dinamis yang saya maksud disini adalah combobox yang menampilkan combobox lain berdasarkan value yang terpilih. Misalkan combobox pertama berisi data provinsi, kemudian jika combobox ini dipilih maka akan menampilkan combobox kedua yang berisi data kabupaten berdasarkan provinsi yang telah dipilih. Oke, langsung saja, buat controller seperti berikut ini.

class Home extends Controller {
	function Home()
	{
		parent::Controller();
	}
	function index()
	{
		$data['kategori'] = $this->db->get('kategori');
		$this->load->view('combobox',$data);
	}
	function tampilkan_subkategori()
	{
		$kategori = $this->uri->segment(3);
		$this->db->where('kategori',$kategori);
		$subkategori = $this->db->get('subkategori');
		echo $this->fungsi->create_combobox('subkategori',$subkategori,'id','nama');
	}
}

Kemudian, buat file view yang dibutuhkan, combobox.php.

<html>
<head>
    <title>Combobox</title>
    <script src="<?php echo base_url();?>javascript/jquery.js" type="text/javascript"></script>
</head>
<body>
<script language='javascript' type='text/javascript'>
function load(page,div)
{
    var site = "<?php echo site_url();?>";
    $.ajax({
        url: site+"/"+page,
        success: function(response){
            $(div).html(response);
        },
    dataType:"html"
    });
    return false;
}
function tampilkan_subkategori()
{
    var selected_kategori = $('select[name=kategori]').val();
    load('home/tampilkan_subkategori/'+selected_kategori,'#subkategori');
}
</script>
<table>
    <tr>
        <td>Pilih Kategori</td>
        <td>:</td>
        <td><?php echo $this->fungsi->create_combobox('kategori',$kategori,'id','nama','onchange="tampilkan_subkategori()"');?></td>
    </tr>
    <tr>
        <td>Pilih Sub Kategori</td>
        <td>:</td>
        <td><span id='subkategori'></span></td>
    </tr>
</table>
</body>
</html>

Lalu terakhir, buat file library fungsi.php dan letakkan di application/libraries/.

class Fungsi
{
    function Fungsi()
    {
        $this->CI =&amp; get_instance();
    }
    function create_combobox($name,$dbobj,$key,$value,$extra='',$edit='')
    {
        $select = '<select name="'.$name.'" '.$extra.'>';
        $select .= '<option value="">:: pilih ::</option>';
        foreach($dbobj->result() as $row)
        {
            $selected = '';
            if($edit!='')
            {
                if($row->$key == $edit)
                {
                    $selected = "selected='selected'";
                }
            }
            $select .= '<option value="'.$row->$key.'" '.$selected.'>'.$row->$value.'</option>';
        }
        $select .= '</select>';
        return $select;
    }
}

Jangan lupa, eksekusi SQL query di bawah ini untuk membuat tabel kategori dan subkategori.

-- ----------------------------
-- Table structure for `kategori`
-- ----------------------------
DROP TABLE IF EXISTS `kategori`;
CREATE TABLE `kategori` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of kategori
-- ----------------------------
INSERT INTO `kategori` VALUES ('1', 'Hewan');
INSERT INTO `kategori` VALUES ('2', 'Buah-buahan');
-- ----------------------------
-- Table structure for `subkategori`
-- ----------------------------
DROP TABLE IF EXISTS `subkategori`;
CREATE TABLE `subkategori` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `kategori` int(11) DEFAULT NULL,
  `nama` varchar(100) DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of subkategori
-- ----------------------------
INSERT INTO `subkategori` VALUES ('1', '1', 'Kuda');
INSERT INTO `subkategori` VALUES ('2', '1', 'Kambing');
INSERT INTO `subkategori` VALUES ('3', '1', 'Sapi');
INSERT INTO `subkategori` VALUES ('4', '2', 'Jambu');
INSERT INTO `subkategori` VALUES ('5', '2', 'Apel');
INSERT INTO `subkategori` VALUES ('6', '2', 'Mangga');

At last but not least, jangan lupa, pastikan file jquery.js ada di folder javascript pada root folder aplikasi.

Penjelasan

  1. Pada saat fungsi index pada controller home diload, maka akan ditampilkan data kategori (hewan, buah-buahan).
  2. Pada selectbox kategori telah ditanamkan javascript pada atribut ‘onchange’, yakni jika selectbox ini berganti value, maka fungsi pada onchange tersebut akan dijalankan, dalam hal ini adalah fungsi tampilkan_subkategori().
  3. Fungsi javascript tampilkan_subkategori() yang ada pada combobox.php akan meload fungsi tampilkan_subkategori pada controller home. Jelas terlihat pada fungsi tersebut, query sql dilakukan untuk mengambil data subkategori berdasarkan kategori yang diparsingkan lewat URL.
  4. Akhirnya, data subkategori ditampilkan pada DOM dengan ID yang didefinisikan pada fungsi load.

Bagaimana? Mudah bukan? Feel free to leave comments (I like it actually)…happy coding!

Related posts:

  1. Membuat Website dengan CodeIgniter #4
  2. Integrasi Ajax di CodeIgniter
  3. Membuat Website dengan CodeIgniter #2
  4. Ajax File Upload (CodeIgniter dan JQuery)
  5. Membuat Website dengan CodeIgniter #3
Tags: ,

53 Comments

  • yazid 10/01/2012 at 11:24 pm

    mas, gimana kalo sy buat 3 combo box yang bertingkat? Perintah create combobox yang ada di controler function tampilkan_subkategori(), kalau saya tambahkan onchange..gak bisa jalan soalnya gak ada javascript di controler. Gimana solusinya?

  • Eko 04/04/2012 at 6:11 pm

    Mas, kira-kira jika saya ingin melakukan validasi di object dynamic combobox seperti itu bisa tidak jika menggunakan form_validation yang ada di codeigniter

  • arick 18/04/2012 at 12:16 pm

    file jquery-nya dmn ya mas??

« Older Comments

Leave a comment