Membuat Chaining Dropdown (Dropdown Berantai) Codeigniter

Studi kasus, dropdown propinsi dan kabupaten

langkah 1: Pembuatan database.

Import source code dibawah ini ke database.

Tabel Propinsi

-- --------------------------------------------------------

--
-- Table structure for table `peta_propinsi`
--

CREATE TABLE IF NOT EXISTS `peta_propinsi` (
  `id_propinsi` int(10) NOT NULL AUTO_INCREMENT,
  `nama_propinsi` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id_propinsi`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=33 ;

--
-- Dumping data for table `peta_propinsi`
--

INSERT INTO `peta_propinsi` (`id_propinsi`, `nama_propinsi`) VALUES
(1, 'Nanggroe Aceh Darussalam'),
(2, 'Sumatera Utara'),
(3, 'Sumatera Barat'),
(4, 'Riau'),
(5, 'Jambi'),
(6, 'Sumatera Selatan'),
(7, 'Bengkulu'),
(8, 'Lampung'),
(9, 'Kepulauan Bangka Belitung'),
(10, 'Kepulauan Riau'),
(11, 'DKI Jakarta'),
(12, 'Jawa Barat'),
(13, 'Jawa Tengah'),
(14, 'DI Yogyakarta'),
(15, 'Jawa Timur'),
(16, 'Banten'),
(17, 'Bali'),
(18, 'Nusa Tenggara Barat'),
(19, 'Nusa Tenggara Timur'),
(20, 'Kalimantan Barat'),
(21, 'Kalimantan Tengah'),
(22, 'Kalimantan Selatan'),
(23, 'Kalimantan Timur'),
(24, 'Sulawesi Utara'),
(25, 'Sulawesi Tengah'),
(26, 'Sulawesi Selatan'),
(27, 'Sulawesi Tenggara'),
(28, 'Gorontalo'),
(29, 'Maluku'),
(30, 'Maluku Utara'),
(31, 'Papua'),
(32, 'Irian Jaya Barat');

Tabel Kabupaten:

-- --------------------------------------------------------

--
-- Table structure for table `peta_kabupaten_kota`
--

CREATE TABLE IF NOT EXISTS `peta_kabupaten_kota` (
  `id_kabupaten_kota` int(10) NOT NULL AUTO_INCREMENT,
  `propinsi_id` int(5) NOT NULL,
  `nama_kabupaten_kota` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id_kabupaten_kota`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=456 ;

--
-- Dumping data for table `peta_kabupaten_kota`
--

INSERT INTO `peta_kabupaten_kota` (`id_kabupaten_kota`, `propinsi_id`, `nama_kabupaten_kota`) VALUES
(8, 1, 'Aceh Tengah'),
(7, 1, 'Aceh Tamiang'),
(6, 1, 'Aceh Singkil'),
(5, 1, 'Aceh Selatan'),
(4, 1, 'Aceh Jaya'),
(3, 1, 'Aceh Besar'),
(2, 1, 'Kabupaten Aceh Barat Daya'),
(1, 1, 'Kabupaten Aceh Barat'),
(9, 1, 'Aceh Tenggara'),
(10, 1, 'Aceh Timur'),
(11, 1, 'Aceh Utara'),
(12, 1, 'Bener Meriah'),
(13, 1, 'Bireuen'),
(14, 1, 'Gayo Lues'),
(15, 1, 'Nagan Raya'),
(16, 1, 'Pidie'),
(17, 1, 'Pidie Jaya'),
(18, 1, 'Simeulue'),
(19, 1, 'Banda Aceh'),
(20, 1, 'Langsa'),
(21, 1, 'Lhokseumawe'),
(22, 1, 'Sabang'),
(23, 1, 'Subulussalam'),
(24, 2, 'Asahan'),
(25, 2, 'Batubara'),
(26, 2, 'Dairi'),
(27, 2, 'Deli Serdang'),
(28, 2, 'Humbang Hasundutan'),
(29, 2, 'Karo'),
(30, 2, 'Labuhanbatu'),
(31, 2, 'Labuhanbatu Selatan'),
(32, 2, 'Labuhanbatu Utara'),
(33, 2, 'Langkat'),
(34, 2, 'Mandailing Natal'),
(35, 2, 'Nias'),
(36, 2, 'Nias Barat'),
(37, 2, 'Nias Selatan'),
(38, 2, 'Nias Utara'),
(39, 2, 'Padang Lawas'),
(40, 2, 'Padang Lawas Utara'),
(41, 2, 'Pakpak Bharat'),
(42, 2, 'Samosir'),
(43, 2, 'Serdang Bedagai'),
(44, 2, 'Simalungun'),
(45, 2, 'Tapanuli Selatan'),
(46, 2, 'Tapanuli Tengah'),
(47, 2, 'Tapanuli Utara'),
(48, 2, 'Toba Samosir'),
(49, 2, 'Binjai'),
(50, 2, 'Gunungsitoli'),
(51, 2, 'Medan'),
(52, 2, 'Padangsidempuan'),
(53, 2, 'Pematangsiantar'),
(54, 2, 'Sibolga'),
(55, 2, 'Tanjungbalai'),
(56, 2, 'Tebing Tinggi'),
(57, 3, 'Agam'),
(58, 3, 'Dharmasraya'),
(59, 3, 'Kepulauan Mentawai'),
(60, 3, 'Lima Puluh Kota'),
(61, 3, 'Padang Pariaman'),
(62, 3, 'Pasaman'),
(63, 3, 'Pasaman Barat'),
(64, 3, 'Pesisir Selatan'),
(65, 3, 'Sijunjung'),
(66, 3, 'Solok'),
(67, 3, 'Solok Selatan'),
(68, 3, 'Tanah Datar'),
(69, 3, 'Bukittinggi'),
(70, 3, 'Padang'),
(71, 3, 'Padangpanjang'),
(72, 3, 'Pariaman'),
(73, 3, 'Payakumbuh'),
(74, 3, 'Sawahlunto'),
(75, 3, 'Solok'),
(76, 4, 'Bengkalis'),
(77, 4, 'Indragiri Hilir'),
(78, 4, 'Indragiri Hulu'),
(79, 4, 'Kampar'),
(80, 4, 'Kuantan Singingi'),
(81, 4, 'Pelalawan'),
(82, 4, 'Rokan Hilir'),
(83, 4, 'Rokan Hulu'),
(84, 4, 'Siak'),
(85, 4, 'Kepulauan Meranti'),
(86, 4, 'Dumai'),
(87, 4, 'Pekanbaru'),
(88, 5, 'Batanghari'),
(89, 5, 'Bungo'),
(90, 5, 'Kerinci'),
(91, 5, 'Merangin'),
(92, 5, 'Muaro Jambi'),
(93, 5, 'Sarolangun'),
(94, 5, 'Tanjung Jabung Barat'),
(95, 5, 'Tanjung Jabung Timur'),
(96, 5, 'Tebo'),
(97, 5, 'Jambi'),
(98, 5, 'Sungai Penuh'),
(99, 6, 'Banyuasin'),
(100, 6, 'Empat Lawang'),
(101, 6, 'Lahat'),
(102, 6, 'Muara Enim'),
(103, 6, 'Musi Banyuasin'),
(104, 6, 'Musi Rawas'),
(105, 6, 'Ogan Ilir'),
(106, 6, 'Ogan Komering Ilir'),
(107, 6, 'Ogan Komering Ulu'),
(108, 6, 'Ogan Komering Ulu Selatan'),
(109, 6, 'Ogan Komering Ulu Timur'),
(110, 6, 'Lubuklinggau'),
(111, 6, 'Pagar Alam'),
(112, 6, 'Palembang'),
(113, 6, 'Prabumulih'),
(114, 7, 'Manna'),
(115, 7, 'Bengkulu Tengah'),
(116, 7, 'Bengkulu Utara'),
(117, 7, 'Kaur'),
(118, 7, 'Kepahiang'),
(119, 7, 'Lebong'),
(120, 7, 'Mukomuko'),
(121, 7, 'Rejang Lebong'),
(122, 7, 'Seluma'),
(123, 7, 'Bengkulu'),
(124, 8, 'Lampung Barat'),
(125, 8, 'Lampung Selatan'),
(126, 8, 'Lampung Tengah'),
(127, 8, 'Lampung Timur'),
(128, 8, 'Lampung Utara'),
(129, 8, 'Mesuji'),
(130, 8, 'Pesawaran'),
(131, 8, 'Pringsewu'),
(132, 8, 'Tanggamus'),
(133, 8, 'Tulang Bawang'),
(134, 8, 'Tulang Bawang Barat'),
(135, 8, 'Way Kanan'),
(136, 8, 'Pesisir Barat'),
(137, 8, 'Bandar Lampung'),
(138, 8, 'Metro'),
(139, 9, 'Bangka'),
(140, 9, 'Sungai Liat'),
(141, 9, 'Bangka Barat'),
(142, 9, 'Bangka Selatan'),
(143, 9, 'Bangka Tengah'),
(144, 9, 'Belitung'),
(145, 9, 'Belitung Timur'),
(146, 9, 'Pangkal Pinang'),
(147, 10, 'Bintan'),
(148, 10, 'Karimun'),
(149, 10, 'Kepulauan Anambas'),
(150, 10, 'Lingga'),
(151, 10, 'Natuna'),
(152, 10, 'Batam'),
(153, 10, 'Tanjung Pinang'),
(154, 11, 'Kepulauan Seribu'),
(155, 11, 'Jakarta Barat'),
(156, 11, 'Jakarta Pusat'),
(157, 11, 'Jakarta Selatan'),
(158, 11, 'Jakarta Timur'),
(159, 11, 'Jakarta Utara'),
(160, 12, 'Bandung'),
(161, 12, 'Bandung Barat'),
(162, 12, 'Banjar'),
(163, 12, 'Bekasi'),
(164, 12, 'Bekasi'),
(165, 12, 'Bogor'),
(166, 12, 'Ciamis'),
(167, 12, 'Cianjur'),
(168, 12, 'Cimahi'),
(169, 12, 'Cirebon'),
(170, 12, 'Depok'),
(171, 12, 'Garut'),
(172, 12, 'Indramayu'),
(173, 12, 'Karawang'),
(174, 12, 'Kuningan'),
(175, 12, 'Majalengka'),
(176, 12, 'Pangandaran'),
(177, 12, 'Purwakarta'),
(178, 12, 'Subang'),
(179, 12, 'Sukabumi'),
(180, 12, 'Sumedang'),
(181, 12, 'Tasikmalaya'),
(182, 13, 'Banjarnegara'),
(183, 13, 'Banyumas'),
(184, 13, 'Batang'),
(185, 13, 'Blora'),
(186, 13, 'Boyolali'),
(187, 13, 'Brebes'),
(188, 13, 'Cilacap'),
(189, 13, 'Demak'),
(190, 13, 'Grobogan'),
(191, 13, 'Jepara'),
(192, 13, 'Karanganyar'),
(193, 13, 'Kebumen'),
(194, 13, 'Kendal'),
(195, 13, 'Klaten'),
(196, 13, 'Kudus'),
(197, 13, 'Magelang'),
(198, 13, 'Pati'),
(199, 13, 'Pekalongan'),
(200, 13, 'Pemalang'),
(201, 13, 'Purbalingga'),
(202, 13, 'Purworejo'),
(203, 13, 'Rembang'),
(204, 13, 'Salatiga'),
(205, 13, 'Semarang'),
(206, 13, 'Sragen'),
(207, 13, 'Sukoharjo'),
(208, 13, 'Surakarta'),
(209, 13, 'Tegal'),
(210, 13, 'Temanggung'),
(211, 13, 'Wonogiri'),
(212, 13, 'Wonosobo'),
(213, 14, 'Bantul'),
(214, 14, 'Gunung Kidul'),
(215, 14, 'Kulon Progo'),
(216, 14, 'Sleman'),
(217, 14, 'Yogyakarta'),
(218, 15, 'Bangkalan'),
(219, 15, 'Banyuwangi'),
(220, 15, 'Batu'),
(221, 15, 'Blitar'),
(222, 15, 'Bojonegoro'),
(223, 15, 'Gresik'),
(224, 15, 'Jember'),
(225, 15, 'Jombang'),
(226, 15, 'Kediri'),
(227, 15, 'Lamongan'),
(228, 15, 'Lumajang'),
(229, 15, 'Madiun'),
(230, 15, 'Magetan'),
(231, 15, 'Malang'),
(232, 15, 'Mojokerto'),
(233, 15, 'Nganjuk'),
(234, 15, 'Ngawi'),
(235, 15, 'Pacitan'),
(236, 15, 'Pamekasan'),
(237, 15, 'Pasuruan'),
(238, 15, 'Ponorogo'),
(239, 15, 'Probolinggo'),
(240, 15, 'Sampang'),
(241, 15, 'Sidoarjo'),
(242, 15, 'Situbondo'),
(243, 15, 'Sumenep'),
(244, 15, 'Surabaya'),
(245, 15, 'Trenggalek'),
(246, 15, 'Tuban'),
(247, 15, 'Tulungagung'),
(248, 16, 'Cilegon'),
(249, 16, 'Lebak'),
(250, 16, 'Pandeglang'),
(251, 16, 'Serang'),
(252, 16, 'Tangerang'),
(253, 16, 'Tangerang Selatan'),
(254, 17, 'Badung'),
(255, 17, 'Bangli'),
(256, 17, 'Buleleng'),
(257, 17, 'Denpasar'),
(258, 17, 'Gianyar'),
(259, 17, 'Jembrana'),
(260, 17, 'Karangasem'),
(261, 17, 'Klungkung'),
(262, 17, 'Tabanan'),
(263, 18, 'Bima'),
(264, 18, 'Dompu'),
(265, 18, 'Lombok Barat'),
(266, 18, 'Lombok Tengah'),
(267, 18, 'Lombok Timur'),
(268, 18, 'Lombok Utara'),
(269, 18, 'Mataram'),
(270, 18, 'Sumbawa'),
(271, 18, 'Sumbawa Barat'),
(272, 19, 'Alor'),
(273, 19, 'Belu'),
(274, 19, 'Ende'),
(275, 19, 'Flores Timur'),
(276, 19, 'Kupang'),
(277, 19, 'Lembata'),
(278, 19, 'Manggarai'),
(279, 19, 'Manggarai Barat'),
(280, 19, 'Manggarai Timur'),
(281, 19, 'Ngada'),
(282, 19, 'Nagekeo'),
(283, 19, 'Rote Ndao'),
(284, 19, 'Sabu Raijua'),
(285, 19, 'Sikka'),
(286, 19, 'Sumba Barat'),
(287, 19, 'Sumba Barat Daya'),
(288, 19, 'Sumba Tengah'),
(289, 19, 'Sumba Timur'),
(290, 19, 'Timor Tengah Selatan'),
(291, 19, 'Timor Tengah Utara'),
(292, 20, 'Bengkayang'),
(293, 20, 'Kapuas Hulu'),
(294, 20, 'Kayong Utara'),
(295, 20, 'Ketapang'),
(296, 20, 'Kubu Raya'),
(297, 20, 'Landak'),
(298, 20, 'Melawi'),
(299, 20, 'Pontianak'),
(300, 20, 'Sambas'),
(301, 20, 'Sanggau'),
(302, 20, 'Sekadau'),
(303, 20, 'Singkawang'),
(304, 20, 'Sintang'),
(305, 21, 'Barito Selatan'),
(306, 21, 'Barito Timur'),
(307, 21, 'Barito Utara'),
(308, 21, 'Gunung Mas'),
(309, 21, 'Kapuas'),
(310, 21, 'Katingan'),
(311, 21, 'Kotawaringin Barat'),
(312, 21, 'Kotawaringin Timur'),
(313, 21, 'Lamandau'),
(314, 21, 'Murung Raya'),
(315, 21, 'Palangka Raya'),
(316, 21, 'Pulang Pisau'),
(317, 21, 'Seruyan'),
(318, 21, 'Sukamara'),
(319, 22, 'Balangan'),
(320, 22, 'Banjar'),
(321, 22, 'Banjarbaru'),
(322, 22, 'Banjarmasin'),
(323, 22, 'Barito Kuala'),
(324, 22, 'Hulu Sungai Selatan'),
(325, 22, 'Hulu Sungai Tengah'),
(326, 22, 'Hulu Sungai Utara'),
(327, 22, 'Kotabaru'),
(328, 22, 'Tabalong'),
(329, 22, 'Tanah Bumbu'),
(330, 22, 'Tanah Laut'),
(331, 22, 'Tapin'),
(332, 23, 'Balikpapan'),
(333, 23, 'Berau'),
(334, 23, 'Bontang'),
(335, 23, 'Kutai Barat'),
(336, 23, 'Kutai Kartanegara'),
(337, 23, 'Kutai Timur'),
(338, 23, 'Paser'),
(339, 23, 'Penajam Paser Utara'),
(340, 23, 'Samarinda'),
(341, 24, 'Bitung'),
(342, 24, 'Bolaang Mongondow'),
(343, 24, 'Bolaang Mongondow Selatan'),
(344, 24, 'Bolaang Mongondow Timur'),
(345, 24, 'Bolaang Mongondow Utara'),
(346, 24, 'Kepulauan Sangihe'),
(347, 24, 'Kepulauan Siau Tagulandang Biaro'),
(348, 24, 'Kepulauan Talaud'),
(349, 24, 'Kotamobagu'),
(350, 24, 'Manado'),
(351, 24, 'Minahasa'),
(352, 24, 'Minahasa Selatan'),
(353, 24, 'Minahasa Tenggara'),
(354, 24, 'Minahasa Utara'),
(355, 24, 'Tomohon'),
(356, 25, 'Banggai'),
(357, 25, 'Banggai Kepulauan'),
(358, 25, 'Buol'),
(359, 25, 'Donggala'),
(360, 25, 'Morowali'),
(361, 25, 'Palu'),
(362, 25, 'Parigi Moutong'),
(363, 25, 'Poso'),
(364, 25, 'Sigi'),
(365, 25, 'Tojo Una-Una'),
(366, 25, 'Toli-Toli'),
(367, 26, 'Bantaeng'),
(368, 26, 'Barru'),
(369, 26, 'Bone'),
(370, 26, 'Bulukumba'),
(371, 26, 'Enrekang'),
(372, 26, 'Gowa'),
(373, 26, 'Jeneponto'),
(374, 26, 'Kepulauan Selayar'),
(375, 26, 'Luwu'),
(376, 26, 'Luwu Timur'),
(377, 26, 'Luwu Utara'),
(378, 26, 'Makassar'),
(379, 26, 'Maros'),
(380, 26, 'Palopo'),
(381, 26, 'Pangkajene dan Kepulauan'),
(382, 26, 'Parepare'),
(383, 26, 'Pinrang'),
(384, 26, 'Sidenreng Rappang'),
(385, 26, 'Sinjai'),
(386, 26, 'Soppeng'),
(387, 26, 'Takalar'),
(388, 26, 'Tana Toraja'),
(389, 26, 'Toraja Utara'),
(390, 26, 'Wajo'),
(391, 27, 'Bau-Bau'),
(392, 27, 'Bombana'),
(393, 27, 'Buton'),
(394, 27, 'ButonUtara'),
(395, 27, 'Kendari'),
(396, 27, 'Kolaka'),
(397, 27, 'KolakaUtara'),
(398, 27, 'Konawe'),
(399, 27, 'KonaweSelatan'),
(400, 27, 'KonaweUtara'),
(401, 27, 'Muna'),
(402, 27, 'Wakatobi'),
(403, 28, 'Boalemo'),
(404, 28, 'Bone Bolango'),
(405, 28, 'Gorontalo'),
(406, 28, 'Gorontalo Utara'),
(407, 28, 'Pohuwato'),
(408, 29, 'Ambon'),
(409, 29, 'Buru'),
(410, 29, 'Buru Selatan'),
(411, 29, 'Kepulauan Aru'),
(412, 29, 'Maluku Barat Daya'),
(413, 29, 'Maluku Tengah'),
(414, 29, 'Maluku Tenggara'),
(415, 29, 'Maluku Tenggara Barat'),
(416, 29, 'Seram Bagian Barat'),
(417, 29, 'Seram Bagian Timur'),
(418, 29, 'Tual'),
(419, 30, 'Halmahera Barat'),
(420, 30, 'Halmahera Selatan'),
(421, 30, 'Halmahera Tengah'),
(422, 30, 'Halmahera Timur'),
(423, 30, 'Halmahera Utara'),
(424, 30, 'Kepulauan Sula'),
(425, 30, 'Pulau Morotai'),
(426, 30, 'Ternate'),
(427, 30, 'Tidore Kepulauan'),
(428, 31, 'Asmat'),
(429, 31, 'Biak Numfor'),
(430, 31, 'Boven Digoel'),
(431, 31, 'Deiyai'),
(432, 31, 'Dogiyai'),
(433, 31, 'Intan Jaya'),
(434, 31, 'Jayapura'),
(435, 31, 'Jayawijaya'),
(436, 31, 'Keerom'),
(437, 31, 'Kepulauan Yapen'),
(438, 31, 'Lanny Jaya'),
(439, 31, 'Mamberamo Raya'),
(440, 31, 'Mamberamo Tengah'),
(441, 31, 'Mappi'),
(442, 31, 'Merauke'),
(443, 31, 'Mimika'),
(444, 31, 'Nabire'),
(445, 31, 'Nduga'),
(446, 31, 'Paniai'),
(447, 31, 'Pegunungan Bintang'),
(448, 31, 'Puncak'),
(449, 31, 'Puncak Jaya'),
(450, 31, 'Sarmi'),
(451, 31, 'Supiori'),
(452, 31, 'Tolikara'),
(453, 31, 'Waropen'),
(454, 31, 'Yahukimo'),
(455, 31, 'Yalimo');

Langkah 2 : Pembuatan Model

<?php

class Model_data extends CI_Model{
    
    public function __construct() {
        parent::__construct();
    }
    
    
    function get_prov(){
        return $this->db->get('peta_propinsi')->result();
    }
    
    function get_kab($key)
  {
      return $this->db->get_where('peta_kabupaten_kota', array('propinsi_id' => $key))->result_array();
  }
}

Simpan dengan nama model_data.php

Langkah 3 : Pembuatan Controller

<?php if (!defined('BASEPATH')) exit ('No direct script access allowed ');

class Percobaan extends CI_Controller {
   
    function __construct() {
        parent::__construct();
        $this->load->model('model_data');
    }
 
    function index(){
        echo 'ini adalah page percobaan';
    }
    
    function provinsi()
    {
      //ambil data di model
      $prov = $this->model_data->get_prov();
 
      //ekspand data
      foreach ($prov as $d) {
        $data['prp'][0] = "-Pilih Propinsi-";
        $data['prp'][$d->id_propinsi] = $d->nama_propinsi;
     }
     $this->load->view('percobaan/provinsi', $data);
    }
    
    
    function kabupaten_dari_provinsi(){
        $key = $this->input->post('key');
        $kab = $this->model_data->get_kab($key);
        $optkab = array();
        foreach ($kab as $row){
           $optkab[$row['id_kabupaten_kota']]=$row['nama_kabupaten_kota'];
        }
        echo form_dropdown('pilihkab',$optkab);
     }

}

Simpan dengan nama percobaan.php

Langkah 4 : Pembuatan View

Dropdown Chain
<script type="text/javascript" src="<?php echo base_url();?>template/js/jquery.js"></script>
<script type="text/javascript">
        function fungsiambilkab(nilai){
           $.ajax({
                type: "POST",
                url: "<?php echo site_url('percobaan/kabupaten_dari_provinsi');?>",
                data:"key="+nilai,
                success: function(data){
                    $("#kab").html(data);
                },
 
                error:function(XMLHttpRequest){
                    alert(XMLHttpRequest.responseText);
                }
 
            })
 
        };
</script>
 
<?php
    echo form_open('#');
    $js = 'onChange="fungsiambilkab(this.value);" class="asas"';
    echo form_dropdown('provinsi', $prp,'', $js);
    echo form_close();
 ?>
</pre>
<div id="kab"></div>
<pre>

Simpan dengan nama percobaan/provinsi.php

Buka dengan memanggil page provinsi

http://localhost/ci_kamu/percobaan/provinsi

Done... Semoga bermanfaat