使用codeigniter从数据库中选择相关选项

Question

i have 2 tables in database

this is my tables : my table from database and the relation

this is my controller

public function add_form(){
            $login = $this->session->userdata('logged_in');
            if(!$login){
                $this->load->view('4dm1n-mtma/login');
            }else{
                $kab = $this->m_lokasi->select_kab();
                $prov = $this->m_lokasi->select_prov();
                $max = $this->m_lokasi->select_max();
                $conf = array(
                        'max' => $max,
                        'kab'=>$kab,
                        'prov' => $prov

                    );
                $this->load->view('4dm1n-mtma/v_add_lokasi',$conf);
            }
        }

this is my model

public function select_all(){

        $this->db->select('id_lw,judul_lw,deskripsi_lw,longitude_lw,
            latitude_lw,nama_p,nama_k,status_lw,gambar_lw');
        $this->db->join('provinsi', 'provinsi.IDProvinsi = lokasi_wisata.IDProvinsi');
        $this->db->join('kabupaten', 'kabupaten.IDKabupaten = lokasi_wisata.IDKabupaten');
        return $this->db->get('lokasi_wisata')->result_object();
    }

    public function select_prov(){

        $this->db->select('IDProvinsi,nama_p');

        return $this->db->get('provinsi')->result_object();
    }
    public function select_kab(){
        $this->db->select('IDKabupaten,nama_k,nama_p');
        $this->db->join('provinsi', 'provinsi.IDProvinsi = provinsi.IDProvinsi');
        return $this->db->get('kabupaten')->result_array();     
    }

and this is my view

code for javascript :

<script> 
function populate(s1,s2){
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
    s2.innerHTML = "";
      if(s1.value){
        var optionArray = ["<?php echo $value->nama_k?>"];
      }
      for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
      }

  } </script>

code for select option :

<div class="form-group">
                <label class="col-sm-2 control-label">Provinsi</label>
                <div class="col-sm-6">
                  <select name="provinsi" id="sel1" type="text" class="form-control" onchange="populate(this.id,'sel2')">
                  <<option value=""> </option>}
                  option

                 <?php  
                      foreach($prov as $value){ ?>
                         <option value = "<?php echo $value->IDProvinsi; ?>"><?php echo $value->nama_p ?></option>";
                     <?php } 
                    ?>
                  </select>
                </div>  
              </div>

               <div class="form-group">
                <label class="col-sm-2 control-label">Kabupaten</label>
                <div class="col-sm-6">
                  <select name="level" id="sel2" type="text" class="form-control">
                    </select>
                </div>  
              </div>

iam asking how to show field nama_k from table kabupaten when IDprovinsi onChange ? and how to get value on this code to the controller

if(s1.value){
        var optionArray = ["<?php echo $value->nama_k?>"];
      }

thx stackoverflow

Answer 1

you need an ajax request if I understand well your need

1. bind the onchange listener to the select field.

2. in the onchange event handler send an ajax request puting as parameter the IDprovinsi selected and bind an oncomplete event handler to specify the logic to apply when the request is done (ie add an option to the select field with the value of the nama_k field ). Take care as well to specify the cookie session in the header of the request if access of the view is restricted.

3. add a method in the controller to filter result from the DB by the IDprovinsi sent from the ajax request and echo the nama_k field value in the standard output (JSON exchange format is recommended for client/server communication)

EDIT

on client side

$('#sel1').bind('change', function(evt){

    var IDProvinsi = $(this).val();

    var url = "http://localhost/index.php/filter_by_id/" + IDProvinsi;

    $.getJSON(url, function(data){
        // data contains the result of the db request
        // custom logic here: populate the s2 field
    }).fail(function() {
        console.log( "error" );
    });
}

on server side

public function filter_by_id($IDProvinsi)
{
    $result = $this->m_lokasi->select_by_provinsi_id($IDProvinsi);

    if($result){
        header("HTTP/1.1 200 OK");
        echo json_encode($result);
    }else{
        header("HTTP/1.1 404 Not Found"); // or a custom code
    }

    die();
}

Answer 2

its work with this code

my js :

<script type="text/javascript"> 
    function fetch_select(val){
       $.ajax({
          type: 'post',
          url: 'fetch_data',
          data: {
              get_option:val
          },
          success: function (response) {
          document.getElementById("sel2").innerHTML=response; 
        }
      });
}

</script>

my select option :

<div class="form-group">
                <label class="col-sm-2 control-label">Provinsi</label>
                <div class="col-sm-6">
                  <select onchange="fetch_select(this.value);" name="provinsi" type="text" class="form-control">
                  <option value="">PILIH PROVINSI</option>
                   <?php
                      $host = 'localhost';
                      $user = 'root';
                      $pass = '';
                      mysql_connect($host, $user, $pass);
                      mysql_select_db('db_mtma');

                      $select=mysql_query("select nama_p,IDprovinsi from provinsi group by IDprovinsi");
                      while($row=mysql_fetch_array($select))
                      {
                       echo "<option value=".$row['IDprovinsi'].">".$row['nama_p']."</option>";
                      }
                  ?>
                  </select>

                </div>  
              </div>

               <div class="form-group">

                <label class="col-sm-2 control-label">Kabupaten</label>
                <div class="col-sm-6">
                  <select name="kabupaten" id="sel2" type="text" class="form-control">
                    </select>
                </div>  
              </div>

my controller :

public function fetch_data(){

            if(isset($_POST['get_option']))
            {
             $host = 'localhost';
             $user = 'root';
             $pass = '';
             mysql_connect($host, $user, $pass);
             mysql_select_db('db_mtma');

             $IDProvinsi = $_POST['get_option'];
             $find=mysql_query("select IDKabupaten,nama_k from kabupaten where IDProvinsi=$IDProvinsi");
             while($row=mysql_fetch_array($find))
             {
              echo "<option value=".$row['IDKabupaten'].">".$row['nama_k']."</option>";
             }
             exit;
            }

        }