jishan jishan - 10 days ago 6
jQuery Question

codeigniter - dependent dropdown with jquery and ajax post

view : learning_view.php

Here is the first dropdown which I am populating from 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>


What I want is to populate another dropdown which is dependent on the first dropdown. For that I have used the jQuery ajax post.

second dropdown:

<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 : learning.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 is coming from the database after ajax post which I checked by

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


in the console.

But couldn't able to figure out how to use the data in the second dropdown of my view.

I mean how can i populate the second dropdown with the data i have received after ajax post.

Answer

I found a solution to my problem by modifying the success function of the ajax post

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

Which append the value into the drop down.

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

I just gave the id of the select block into the success function of the ajax post and appended the value. It works but there is a problem which is when I change the selection of the first dropdown new value appears but the values which were showing for the previous selection doesn't go away.