Code Igniter - Select tag option depending on another select tag value

Question

I'm new in CodeIgniter and still junior in programming, so don't be angry at me.

PS: don't be angry for my English too. ;)

I am creating small CMS for one project. Inside that project its few select tags, first ones have just a few values but the next ones, have many values, which depends to the one of the values, from select tag that i mention before.

Its everything ok with my database tables dependencies, etc. but I dont know how to make dependencies to show up in select tags. I tried to make it with Ajax, but I am still not make it, and I read that I can make it with codeIgniter libraries, is it true? Can any body can help me?

This is my view file:

    <?php echo validation_errors('<p class="alert alert-dismissable alert-danger">'); ?>
<form method="post" action="<?php echo base_url(); ?>admin/engines/add">
    <div class="row">
        <div class="col-lg-6">
            <h1>Engine Type</h1>
        </div>
        <div class="col-lg-6">
            <div class="btn-group pull-right">
                <input type="submit" name="submit" class="btn btn-success" value="Save">
                <a href="<?php echo base_url(); ?>admin/engines" class="btn btn-default">Close</a>
            </div>
        </div>
    </div><!-- /.row -->
    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb">
                <li><a href="<?php echo base_url(); ?>admin/dashboard"><i class="fa fa-dashboard"></i>Dashboard</a></li>
                <li><a href="<?php echo base_url(); ?>admin/dashboard"><i class="fa fa-pencil"></i>Variklio Tipai</a></li>
                <li class="active"><i class="fa fa-plus-square-o"></i>Pridėti Variklio tipą</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <h2>Engine type One</h2>
            <div class="form-group">
                <label>Engine Name</label>

                <input class="form-control" type="text" name="engine" value="<?php echo set_value('engine'); ?>" placeholder="Engine Type" >
            </div>

            <div class="form-group">
                <label>Category</label>
                <select name="brand" class="form-control">
                    <option value="category">Choose category</option>
                    <?php foreach($categories as $category) : ?>
                        <option value="<?php echo $category->id; ?>"><?php echo $category->category_name; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        <!-- END Category-->
        <!-- *** Brand *** -->
            <div class="form-group">
                <label>Brand</label>
                <select name="brand" class="form-control">
                    <option value="">Choose Brand</option>
                    <?php foreach ($brands as $brand) : ?>
                        <option value="<?php echo $brand->id; ?>"><?php echo $brand->v_brand_name; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        <!-- **** END Brand ***-->
        <!-- *** Model *** -->
            <div class="form-group">
                <label>Model</label>
                <select name="model" class="form-control">
                    <option value="">Choose model</option>
                    <?php foreach ($models as $model) : ?>
                        <option value="<?php echo $model->id; ?>"><?php echo $model->v_model_name; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        <!-- **** END MODEL ***-->
            </div>

        </div>


    </div>
</form>

Answer 1

for example this is my view

<select name='list1' id='list1'>
    <option value='1'>id 1</option>
    <option value='2'>id 2</option>
    <option value='3'>id 3</option>
    <option value='4'>id 4</option>
    <option value='5'>id 5</option>
</select>

this is 2nd dropdown list

<select name='list2' id='list2'>

</select> 

now jquery code is

$("#list1").on("change",function(){
    var value = $(this).val();
    $.ajax({
         url : "example.com/welcome/get_data",
         type: "post",
         data: {"value":value},
         success : function(data){
             $("#list2").html(data);
         },
    });
});

now my controller function is

 public function get_data()
 {
      $value = $this->input->post("value");
      $data = $this->mymodal->get_data($value);
      $option ="";
      foreach($data as $d)
      {
         $option .= "<option value='".$d->id."' >".$d->name."</option>";
      }
       echo $option;
 }

my model function is

 public function get_data($value)
 {
    $this->db->where("id",$value);
    return $this->db->get("table_name")->result();
 }