CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
Srujan Ramanna Gowda
Srujan Ramanna Gowda

Reputation: 11

Dynamic drop down using single table in codeIgniter

Table

Table

Here when I select Category 1 from drop down I should get district names which comes under Category 1 and for Category 2 I should get districts of Category 2 and so on.... As of now in my code i'm pulling out all district names from my district table master by using district codes. But I should get district names based on category selection.

View:

<select class="form-control" name="category" id='cat_id'>

<?php   
  foreach($query1 as $row)
  { 
    echo '<option value="'.$row->category.'">'.$row->category.'</option>';
  }
  ?>
</select>
<select name="placename" id="placename">
  <?php   
   foreach($query2 as $row)
   { 
       echo '<option value="'.$row->district_name.'">'.$row- 
       >district_name.'</option>';
   }
  ?>
</select>

Model:

function viewcatplace()
{
   $this->db->select("district.district_name");
   $this->db->from('district');
   $this->db->join('jc_place_master', 'district.district_code = 
   jc_place_master.district');
   $query = $this->db->get();
   return $query->result();
}

Controller:

public function viewcatplace()
{
    $this->load->model('JcMeetingExpense_model');
    $data['query1'] = $this->JcMeetingExpense_model->viewcatprice();
    $data['query2'] = $this->JcMeetingExpense_model->viewcatplace();   
    $this->load->view('JcMeetingExpense/place_view',$data);
}

Upvotes: 0

Views: 276

Answers (2)

AngularJMK
AngularJMK

Reputation: 1268

It can be only done by ajax:

In controller:
public function index()
    {
        $web = array();
        $web['title'] = 'Select tool';
        $web['content'] = 'web/category_index';
        // $web['data'] = $this->Common_model->get_all('category','*','','');
        $web['data'] = $this->db->query('SELECT DISTINCT category FROM category')->result();
        $this->load->view('web_template', $web);
    }

Load the category data in select option:
<select class="form-control" id="select_category">
                                <option value="" disabled selected>Select category</option>
                                <?php if (isset($data) && !empty($data)) : ?>
                                    <?php foreach ($data as $key => $value) : ?>
                                        <option value="<?php echo $value->category; ?>"><?php echo $value->category; ?></option>
                                    <?php endforeach; ?>
                                <?php endif; ?>

                            </select>

<select class="form-control" id="append_district"></select>

Using jquery change event get the data using ajax call:
<script type="text/javascript">
    $(document).on('change',"#select_category",function (e) {
        var optVal= $("#select_category option:selected").val();
        if (optVal) {
            $.ajax({
                type: "post",
                url: "getCategoryDetails",
                cache: false,               
                data: {'category' : optVal},
                success: function(json){                        
                    try {        
                        var obj = jQuery.parseJSON(json);
                        $('#append_district').empty();

                        var append_data = '';
                        if (obj.length > 0) {
                            $.each(obj, function( index, value ) {
                                append_data += '<option value="'+value.district+'">'+value.district+'</option>' 
                            });

                            $('#append_district').append(append_data);
                        }
                    } catch(e) {     
                        console.log('Exception while request..');
                    }       
                },
                error: function(){                      
                    console.log('Error while request..');
                }
            });
        }
    });
</script>

The data can be get by JSON format.In controller add this method:
public function getCategoryDetails()    {
        $category =  $_POST['category'];
        $categoryData = $this->db->query('SELECT district FROM category where category="'.$category.'"')->result();
        echo json_encode ($categoryData) ;    
    }

Upvotes: 0

Nimesh Patel
Nimesh Patel

Reputation: 295

You can use this demo for your solution : https://www.codexworld.com/dynamic-dependent-dropdown-codeigniter-jquery-ajax/

Upvotes: 1

Related Questions