title: Ajax with select box in codeigniter
body: <p>i have a form with two select box. one is for the city and the other one for the area.</p>
  
  <p>My requirement. When some one selects a city,The areas in the city must be captured from database and displayed in another select box.</p>
  
  <p>i tried but, i have problem with my ajax. here is my code below.</p>
  
  <p><strong>view</strong></p>
  
  <pre><code>                                    &lt;div class="location-group"&gt;
                                      &lt;label class="-label" for="city"&gt;
                                          Location
                                      &lt;/label&gt;
                                      &lt;div class=""&gt;
                                          &lt;select id="city_select"&gt;
                                              &lt;option value="0"&gt; select&lt;/option&gt;
                                              &lt;?php foreach ($city as $cty) : ?&gt;
                                              &lt;option value="&lt;?php echo $cty-&gt;city_id; ?&gt;"&gt;&lt;?php echo $cty-&gt;name; ?&gt;&lt;/option&gt;
                                              &lt;?php endforeach ?&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
  
                                  &lt;div class="location control-group" id="area_section"&gt;
                                      &lt;label class="control-label" for="area"&gt;
                                          Area
                                      &lt;/label&gt;
                                      &lt;div class="controls"&gt;
                                          &lt;select id="area_select"&gt;
                                              &lt;option value=""&gt; Any&lt;/option&gt;
                                              &lt;?php foreach ($area as $ara) : ?&gt;
                                              &lt;option value="&lt;?php echo $ara-&gt;ara_id; ?&gt;"&gt;&lt;?php echo $ara-&gt;name; ?&gt;&lt;/option&gt;
                                              &lt;?php endforeach ?&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;&lt;!-- /.controls --&gt;
                                  &lt;/div&gt;&lt;!-- /.control-group --&gt;
  </code></pre>
  
  <p><strong>controller</strong></p>
  
  <pre><code>function __construct() {
      parent::__construct();
  
    //session, url, satabase is set in auto load in the config
  
      $this-&gt;load-&gt;model('Home_model', 'home');
      $this-&gt;load-&gt;library('pagination');
  
  
  }
  
  
  
  function index(){
      $data['city'] =  $this-&gt;home-&gt;get_city_list();
      $data['type'] =  $this-&gt;home-&gt;get_property_type_list();
      $this-&gt;load-&gt;view('home', $data);
  }
  
  
  function get_area(){
      $area_id = $this-&gt;uri-&gt;segment(3);
      $areas =  $this-&gt;home-&gt;get_area_list($area_id);
      echo json_encode($areas);
  }
  </code></pre>
  
  <p><strong>Model</strong></p>
  
  <pre><code>function get_area_list($id){
    $array = array('city_id' =&gt; $id, 'status' =&gt; 1);
    $this-&gt;db-&gt;select('area_id, city_id, name');
    $this-&gt;db-&gt;where($array);
    $this-&gt;db-&gt;order_by("name", "asc"); 
    $this-&gt;db-&gt;from('area'); 
    $query = $this-&gt;db-&gt;get();
    $result = $query-&gt;result();
    return $result;
  }
  </code></pre>
  
  <p><strong>Ajax</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#area_section').hide();
  
  
      $('#city_select').on('change', function() {
       // alert( this.value ); // or $(this).val()
        if (this.value == 0) {
          $('#area_section').hide(600);
        }else{
  
  
          //$("#area_select").html(data);
              $.ajax({
                    type:"POST",
                    dataType: 'json',
                    url:"&lt;?php echo base_url('index.php?/home/get_area/') ?&gt;",
                    data: {area:data},
                    success: function(data) {
                      $('select#area_select').html('');
                      $.each(data, function(item) {
                          $("&lt;option /&gt;").val(item.area_id)
                                         .text(item.name)
                                         .appendTo($('select#area_select'));
                      });
                    }
                  });
  
  
          $('#area_section').show(600); 
        };
  
  
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>once i select a city, it must get all the areas in the city from database and display it in the <strong>area_select</strong> select box.</p>
  
  <p>can any one please help me. Thanks.</p>