set_select option in ajax+codeigniter - php

Question

how can i use a set_select option on ajax part for a dynamic dependent dropdown list, this list is clearing after validation errors, so i want to use set_select option here. kindly see below code:
<script type="text/javascript">
$(document).ready(function() {
$('select[name="relegion"]').on('change', function() {
var regID = $(this).val();
if(regID) {
document.write("ok");
$.ajax({
url: '/demo/main/selectcaste/'+regID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="caste"]').empty();
$('select[name="caste"]').append('<option value=1>'+ "Not Interested to specify" +'</option>');
$('select[name="caste"]').append('<option value=2>'+ "InterCaste" +'</option>');
$.each(data, function(key, value) {
$('select[name="caste"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
});
}
});
}else{
$('select[name="caste"]').empty();
}
});
});

Answer 1

Maybe you need something like this,
View code.
<select name="category" id="category">
<option>Pilih Kategori Kelas</option>
<option value="1">category 1</option>
<option value="2">category 2</option>
</select>
<select name="sub_category" id="sub_category">
<option>Pilih category Kelas</option>
</select>
AJAX code.
$(document).ready(function(){
$('#category').on('change',function(){
var category_id = $(this).val();
if(category_id){
$.ajax({
type:'POST',
url:'<?php echo base_url()."profile_kelas/get_sub_category";?>',
data: {
category_id : category_id
},
success:function(html){
$('#sub_category').html(html);
}
});
}else{
$('#sub_category').html('<option>Pilih Sub category Kelas</option>');
}
});
});
My Controller code.
public function get_sub_category(){
$data = $this->model_profile->get_sub_category($_POST['category_id']);
foreach ($data as $row) {
echo '<option value="'.$row->id.'">'.$row->sub_category.'</option>';
}
}
You can make your parent category dynamically.