multiple dependent dropdown in add page and edit page in codeigniter - php

Question

I need to add multiple dropdowns to my project and it also needs a dependent multiple dropdowns
The existing dropdown category should be changed to multiple dropdowns
Automatically they select values in its dependent subcategory multiple dropdowns it its possible ?
Current Single Choice Dependent Dropdown How To Make Multiple Choose Dependent Dropdown?
please help me
view page
<label for="category_id"><?php echo get_phrase('category'); ?> <span
class="text-danger">*</span></label>
<select class="form-control selectpicker" name="category_id" id="category_id" required multiple>
<option value="" hidden><?php echo get_phrase('select category'); ?></option>
<?php
$roles = $this->db->get('category_table')->result_array();
foreach($roles as $row):
?>
<option value="<?php echo $row['category_id'];?>">
<?php echo $row['category_name'];?>
</option>
<?php
endforeach;
?>
</select>
<label for="idsubcategory"><?php echo get_phrase('Sub_category'); ?>
<span class="text-danger"></span> </label>
<select class="form-control" name="idsubcategory" id="idsubcategory"
placeholder="subcategory" multiple>
<option value="" hidden><?php echo get_phrase('select subcategory'); ?></option>
<?php
$roles = $this->db->get('sub_category')->result_array();
foreach($roles as $row):
?>
<option value="<?php echo $row['idsubcategory'];?>">
<?php echo $row['subcategory_name'];?>
</option>
<?php
endforeach;
?>
</select>
ajax
$(document).ready(function()
{
$('#category_id').change(function() {
var category_id = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/get_sub_category');?>",
method: "POST",
data: {
category_id: category_id
},
async: true,
dataType: 'json',
success: function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++) {
html += '<option value=' + data[i].idsubcategory + '>' + data[i]
.subcategory_name + '</option>';
}
$('#idsubcategory').html(html);
}
});
return false;
});
});
controller
function get_sub_category(){
$category_id = $this->input->post('category_id',TRUE);
$data = $this->Crud_model->get_sub_category($category_id)->result();
echo json_encode($data);
}
model
function get_sub_category($category_id){
$query = $this->db->get_where('sub_category', array('category_id' => $category_id));
return $query;
}

Answer 1

<select id="select1">
<option value='opt1'>Option 1</option>
<option value='opt2'>Option 2</option>
<option value='opt3'>Option 3</option>
</select>
<select id="select2">
<select>
<select id="select3">
<select>
<script>
$('#select1').change(function() {
var category_id = $(this).val();
$.ajax({
url: "<?php echo site_url('controller/function_for_second_dropdown');?>",
method: "POST",
data: {
category_id: category_id
},
async: true,
dataType: 'json',
success: function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++) {
html += '<option value=' + data[i].idsubcategory + '>' + data[i].your_option+ '</option>';
}
$('#select2').append(html);
}
});
$('#select2').change(function() {
var select2= $(this).val();
$.ajax({
url: "<?php echo site_url('controller/function_for_third_dropdown');?>",
method: "POST",
data: {
select2: select2
},
async: true,
dataType: 'json',
success: function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++) {
html += '<option value=' + data[i].your_option + '>' + data[i].your_option+ '</option>';
}
$('#select2').append(html);
}
});
</script>