title: Choosing a chained select option with jquery using Codeigniter
body: <p>I'm not much good at jquery and ajax, and I'm now having difficulties on a select box. I use CI and My code is below.</p>
  
  <p>Another select box "category" data will be show according to the "brand". How can I carry data from "brand" and show data in "category" with jquery?</p>
  
  <p>View</p>
  
  <pre><code>&lt;select name="brand" class="form-control" id="brand" required&gt;
      &lt;?php
          if($items) {
              foreach($items as $key) {
      ?&gt;
      &lt;option value="&lt;?php echo $key-&gt;brand_id ?&gt;"&gt;
          &lt;?php echo $key-&gt;brand_name ?&gt;
      &lt;/option&gt;
      &lt;?php
              }
          }
      ?&gt;
  &lt;/select&gt;
  
  &lt;select name="category" class="form-control" id="category" required&gt;
  
  &lt;/select&gt;
  </code></pre>
  
  <p>Ajax</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          $("#brand").on('change', function() {
              var brand = $(this).val();
              $.ajax ({
                  type: "post",
                  url: "&lt;?php echo base_url(); ?&gt;receiving/showCategory",
                  dataType: 'json',
                  data: 'brand='+brand,
  
                  success: function(msg) {
                      var options;
                      for(var i = 0; i&lt;msg.length; i++) {
                          options = '&lt;option&gt;'+msg.category[i].category_name+'&lt;/option'&gt;;
                      }
                      $('#category').html(options);
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>function showCategory() {
      $brand_id = $this-&gt;input-&gt;post('brand');
      $data['category'] = $this-&gt;item_model-&gt;category($brand_id);
      echo json_encode($data);
      }
  </code></pre>
  
  <p>My category table contains: category_id, category_name, brand_id.</p>