multiple dependent dropdown in add page and edit page in codeigniter

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;
}

Syed Muhammad Shakayb Athar · Answer 1 · 2021-11-26T13:20:01.020

0

<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>

edited Nov 26 '21 at 13:20

answered Nov 26 '21 at 12:34

Syed Muhammad Shakayb Athar

101
7

I just selected a value in the category dropdown and then its dependent value came up in the subcategory dropdown and then I selected the next value as multiple in the category dropdown. Then the subcategory dropdown should show the dependent subcategory values of both the categories. is possible ? – Dileep Nov 26 '21 at 13:03
what you want? Do you want to get data which reflects by second selected option? – Syed Muhammad Shakayb Athar Nov 26 '21 at 13:09
i want add multiple dependent dropdown now its only work single data showing in subcategory dropdown i need multiple display multiple data – Dileep Nov 26 '21 at 13:10
like this https://phppot.com/demo/load-dependent-dropdown-on-multi-select-using-php-and-jquery/ – Dileep Nov 26 '21 at 13:14
please visit this link too... https://stackoverflow.com/questions/69884612/populate-2nd-drop-down-based-on-1st-drop-down-result-by-using-ajax-in-codeignite/69885935#69885935 – Syed Muhammad Shakayb Athar Nov 26 '21 at 13:20

multiple dependent dropdown in add page and edit page in codeigniter

1 Answers1