Home Ci Jquery Membuat Combobox Dinamis dengan JQuery dan Codeigniter

Sunday, December 30, 2012

Membuat Combobox Dinamis dengan JQuery dan Codeigniter

Tags

Saat membuat form pendaftaran, terkadang kita perlu memasukkan alamat lengkap calon pengguna yang terdiri dari alamat detail, kodepos, kota, provinsi dan negara jika diperlukan. Untuk keperluan tracking, kita harus memisahkan komponen alamat tersebut ke dalam field yang terpisah. Untuk data kota, provinsi dan negara, kita perlu membuat form input berupa combobox dinamis agar data kota sesuai dengan data provinsi dan negaranya.
Pertama kita siapkan database yang mengandung data kota, provinsi dan negara. Kita ambil saja database kota yang terdapat pada postingan ini.
Setelah aplikasi codeingiter telah dikonfigurasi dengan benar, pada kita buat sebuah controller combobox.php seperti berikut :

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
class Combobox extends CI_Controller {
      
    function __construct() {
        parent::__construct();
                $this->load->model("main_model");
    }
      
    public function index() {
        $theme["negara"] = $this->main_model->get_country();
        $this->load->view('combobox',$theme);
    }
     
    function get_city($id) {
        $tmp    = '';
        $data   = $this->main_model->get_city_by_state($id);
        if(!empty($data)){
            $tmp .= "<option value=''>Pilih Kota / Kabupaten</option>";
            foreach($data as $row) {   
                $tmp .= "<option value='".$row->city_id."'>".$row->city_name."</option>";
            }
        } else {
            $tmp .= "<option value=''>Pilih Kota / Kabupaten</option>";
        }
        die($tmp);
    }
     
    function get_state($id) {
        $tmp    = '';
        $data   = $this->main_model->get_state_by_country($id);
        if(!empty($data)) {
            $tmp .= "<option value=''>Pilih Provinsi</option>";
            foreach($data as $row){
                 $tmp .= "<option value='".$row->state_id."'>".$row->state_name."</option>";
            }
        } else {
            $tmp .= "<option value=''>Pilih Provinsi</option>";
        }
        die($tmp);
    }
}
Untuk model kita buat file main_model.php seperti berikut :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
class Main_model extends CI_Model
{          
    function get_state(){
        $this->db->order_by("state_id", "ASC");
        return $this->db->get("master_state");       
    }
     
    function get_city() {
        $this->db->order_by("city_id", "ASC");
        return $this->db->get("master_city");       
    }
     
    function get_country() {
        $this->db->order_by("country_id", "ASC");
        return $this->db->get("master_country");       
    }
     
    function get_city_by_state($id) {
        $this->db->order_by("city_name", "ASC");
        $this->db->where("city_state_id", $id);
        $query = $this->db->get("master_city");
        if ($query->num_rows() > 0) return $query->result();             
    }
     
    function get_state_by_country($id) {
        $this->db->order_by("state_name", "ASC");
        $this->db->where("state_country_id", $id);
        $query = $this->db->get("master_state");
        if ($query->num_rows() > 0) return $query->result();             
    }  
}
?>
Setelah itu, kita buat bagian views-nya. Jangan lupa menyertakan file jquery-1.4.1.js pada folder /assets/js/
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Combobox dinamis</title>
        <script src="<?php echo base_url(); ?>assets/js/jquery-1.4.1.js"></script>
    </head>
    <body>
        <form action="" method="post">
        <table>
            <tr>
            <td>Negara</td>
            <td>
                        <select name="negara" id="negara">
                <option value="">Pilih Negara</option>
                <?php
                    foreach ($negara->result() as $row)
                    echo "<option value='".$row->country_id."'>".$row->country_name."</option>";
                ?>
            </select>
                    </td>
        </tr>
        <tr>
            <td>Provinsi</td>
            <td>
                <select name="provinsi" id="provinsi">
                <option value="">Pilih Provinsi</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>Kota</td>
            <td>
                <select name="kota" id="kota">
                <option value="">Pilih Kota / Kabupaten</option>
            </select>
            </td>
        </tr>
        </table>
        </form>
        <script language="javascript">
        $(document).ready(function(){      
        $('#negara').change(function(){
            $.post("<?php echo base_url();?>welcome/get_state/"+$('#negara').val(),{},function(obj){
                $('#provinsi').html(obj);
            });
        });
        $('#provinsi').change(function(){
            $.post("<?php echo base_url();?>welcome/get_city/"+$('#provinsi').val(),{},function(obj){
            $('#kota').html(obj);
            });
            });
        });
        </script>
    </body>
</html>
Hasilnya seperti berikut :
combobox dinamis negara provinsi kota
Sumber : http://rizki.info/2012/09/06/membuat-combobox-dinamis-dengan-jquery-dan-codeigniter/

Artikel Terkait

ahmadzar.blogspot.com

Next Post
Previous Post