title: How to do a dynamic dropdown using Ajax in Codeigniter
body: <p>I know this may be the [insertLongNumber]th time someone's ask this question, I did my research but I can't find another answer that fits my problem. So here it is.</p>
  
  <p>I'm working on a dynamic dropdown with php and ajax, in codeigniter. I'm new to CI and I have a basic knowledge of Ajax. </p>
  
  <p>What I have noticed so far is that in the console, it is not recognizing the value coming from the first dropdown, so i get departamento_id : undefined
  This makes me thing problem comes from ajax script (i got it of the web)</p>
  
  <p>My view, with the ajax code included</p>
  
  <pre><code>&lt;?php
  $this-&gt;load-&gt;helper('html'); 
  ?&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Buscador&lt;/title&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $('#dpto-dropdown select').change(function () {
                  var selDpto = $(this).attr('value');
                  console.log(selDpto);
                  $.ajax({
                      url: "test/ajax_call",
                      async: false,
                      type: "POST",
                      data: "departamento_id="+selDpto,
                      dataType: "html",
  
                      success: function(data) {
                          $('#ciudad').html(data);
                      }
                  })
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;?php echo form_open('test/buscar');?&gt;
  
  &lt;?php 
  
  &lt;div id='dpto-dropdown'&gt;&lt;?php print form_dropdown('departamentos', $departamento) ?&gt;&lt;/div&gt;
  
  
  &lt;div id="ciudad"&gt;&lt;select&gt;&lt;option value=''&gt;-&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
  //rest of code...
  </code></pre>
  
  <p>This is my Controller code: </p>
  
  <pre><code>class Test extends CI_Controller 
  {
  function __construct()
  {
      parent::__construct();
      $this-&gt;load-&gt;model('buscador_model');
  }   
  
  function index()
  {
      $departamentos = $this-&gt;buscador_model-&gt;traerInfoDptos();
      $precios = $this-&gt;buscador_model-&gt;traerPrecioHoteles();
  
      foreach($departamentos as $departamento){
          $dpto_final[$departamento-&gt;id] = $departamento-&gt;nom_departamento;
      }
  
      $info = array(
          'departamento' =&gt; $dpto_final,
          'precios' =&gt; $precios,
      ); 
  
      $this-&gt;load-&gt;view('buscador_view', $info);
  }
  
  function ajax_call()
  {
      //check to see people wont go directly
      if (isset($_POST) &amp;&amp; isset($_POST['departamento_id'])) 
      {
          $dpto = $_POST['departamento_id'];
          $ciudad = $this-&gt;buscador_model-&gt;traerCiudadPorDpto($dpto);
  
          foreach ($ciudad as $c)
          {
              $ciudadfinal[$c-&gt;cod_ciudad] = $c-&gt;nom_ciudad;
          }
  
          //dropdown
  
          echo form_dropdown('Ciudades', $ciudadfinal);
      }
      else 
      {
          redirect('index');
      }
  }
  }
  </code></pre>
  
  <p>this is my model: </p>
  
  <pre><code>Class Buscador_model extends CI_Model
  {
  
  function traerInfoDptos()
  {
      $this-&gt;db-&gt;select('id, nom_departamento');
      $this-&gt;db-&gt;from('departamento');
      $query = $this-&gt;db-&gt;get();
  
      if ($query-&gt;num_rows &gt; 0)
      {
          return $query-&gt;result();
      }
  }
  
  function traerCiudadPorDpto($dpto)
  {
      $query = $this-&gt;db-&gt;query("SELECT nom_ciudad, cod_ciudad FROM ciudad WHERE departamento_id = '{$dpto}'");
  
      if ($query-&gt;num_rows &gt; 0)
      {
          return $query-&gt;result();
      }
  }
  
  }// end buscador model class
  </code></pre>