Codeigniter dependent - with jquery and ajax post

Question

view: learning_view.php

Here is the first dropdown that I populate from the database.

<select name = 'category' id = 'category'> <option value="">-- Select Category --</option> <?php foreach($category as $item){ ?> <option value="<?php echo $item->id_cat; ?>"><?php echo $item->name; ?></option> <?php } ?> </select> <br><br> 

I want to populate another drop-down menu, which depends on the first drop-down list. For this, I used the jQuery ajax post.

second drop-down menu:

  <select name = 'type' id = 'type'> <option value="">-- Select Type --</option> <?php foreach($type as $item){ ?> <option value="<?php echo $item->id_type; ?>"><?php echo $item->name; ?></option> <?php } ?> </select> <br><br> 

Ajax post:

  jQuery(document).ready(function(){ $("#category").change(function() { var category_id = {"category_id" : $('#category').val()}; console.log(category_id); $.ajax({ type: "POST", data: category_id, url: "<?= base_url() ?>learning/dependent_dropdown", success: function(data){ $.each(data, function(i, data){ console.log(data.name); console.log(data.id_type) }); } }); }); }); 

controller: learn.php

  public function dependent_dropdown() { if(isset($_POST['category_id'])) { $this->output ->set_content_type("application/json") ->set_output(json_encode($this->learning_model->getType($_POST['category_id']))); } } 

The data comes from the database after the ajax message I checked

  console.log(data.name); console.log(data.id_type) 

in the console.

But it was not possible to figure out how to use the data in the second drop-down list of my view.

I mean, how can I populate the second drop-down menu with the data I got after the ajax post.

Answer 1

I found a solution to my problem by changing the ajax message success function:

 success: function(data) { $.each(data, function(i, data) { $('#type').append("<option value='" + data.id_type + "'>" + data.name + "</option>"); }); } 

Which adds value to the drop-down list.

 <select name="type" id="type"> <option value="">-- Select Type --</option> </select> 

I just gave the select block identifier to the ajax message success function and added a value. It works, but there is a problem that occurs when I change the selection of the first drop-down new value, but the values ​​that were shown for the previous selection do not disappear.

Answer 2

Here are some changes to your answer.

 success: function(data) { $('#type').html('<option value="">-- Select Type --</option>'); $.each(data, function(i, data){ $('#type').append("<option value='"+data.id_type+"'>"+data.name+"</option>"); }); } 

It will display only new items.

Answer 3

I did the same today. when I call url via ajax, I just perform the load viewing procedure and load all the data into another small file containing only a choice and an option, and a request to display the data, and in the main view I create a div with id # divide and just for success ajax i did

 $('#divid').html(data); 

and this view will be displayed on the main page.

hope i understand what you understand.

Answer 4

In the success function, write this code. It will add your data to the second drop-down list:

 $.ajax({ type: "POST", data: category_id, url: "<?= base_url() ?>learning/dependent_dropdown", success: function(data) { $.each(data, function(i, data) { var opt = $('<option />'); opt.val(data.id_type); opt.text(data.name); $('#your_second_dropdown_id_name').append(opt); }); } }); 

Answer 5

view code:

 <select id="category" name="prod_cat" class="form-control col-md-7 col-xs-12 category"> <?php if($category) foreach ($category as $cat) { ?> <option value="<?php echo $cat->cat_id;?>"><?php echo $cat->cat_title; ?></option> <?php } ?> </select> 

Ajax code:

`

 $(document).ready(function() { $('.category').change(function(){ $.ajax({ type: "POST", url: "<?php echo base_url();?>Product_admin/getSub", data:{id:$(this).val()}, beforeSend :function(){ $(".subcat option:gt(0)").remove(); $('.subcat').find("option:eq(0)").html("Please wait.."); }, success: function (data) { /*get response as json */ $('.subcat').find("option:eq(0)").html("Select Subcategory"); var obj=jQuery.parseJSON(data); $(obj).each(function() { var option = $('<option />'); option.attr('value', this.value).text(this.label); $('.subcat').append(option); }); /*ends */ } }); }); }); 

`

Controller:

 public function getSub() { $result=$this->db->where('cat_id',$_POST['id']) ->get('tbl_subcategory') ->result(); $data=array(); foreach($result as $r) { $data['value']=$r->subcat_id; $data['label']=$r->subcat_title; $json[]=$data; } echo json_encode($json); 

I had the same problem too. This is what I did. https://github.com/eboominathan/Dependent-Dropdown-in-Codeigniter-3.0.3