multiple dependent drop down values usig ajax

Hi all,

I am facing problem in multiple drop down my code goes like this. i want to get subcategories based on categories selected.
please help me i am stuck.

MODEL: product_model.php

PHP Code:

public function get_product_ajax($type)
    {
 if($type==1)
 {
 $table= $this->db->get('subcategories')->result();
 
       // $table = ($type == '1')?'category' : 'subcategories';
         
        return $table;
    }
 } 


CONTROLLER: products.php

Code:

public function get_products_ajax($type)
   {
       if (!is_numeric($type)) return FALSE;
       $items = $this->product_model->get_product_ajax($type);
       $str = '<option value="">'.get_phrase('select').' *</option>';
       if ($type == 1) {
           foreach ($items as $value) {
               $str.='<option value="'.$value->subcategory_id.'">'.$value->subcategory_name.' '.$value->category_name.'</option>';
           }
       }
       echo $str;
   }

VIEW: form_add_product.php

PHP Code:

div class="box">
    <div class="box-body"><br/>
        <?=form_open(base_url('index.php/products/create'), 'role="form" class="form-horizontal"'); ?>
       <?php  $roles = $this->db->get('roles')->result();?>
   
   <div class="form-group">
    <label for="product_code" class="col-sm-1 hidden-xs control-label hidden col-xs-2"><?php echo get_phrase('product_code');?>: *</label>
            <div class="col-sm-4 col-xs-12">
                <?=form_input('product_code', set_value('product_code'), 'id="product_code" placeholder="'.get_phrase('product_code').'" class="form-control bottom-border" required') ?>
            </div>
         <div class="col-sm-3 col-xs-4">
            <select name="category"  id="category" class="form-control bottom-border" required>
                    <?php 
                    $category = $this->db->get('category')->result();
                    foreach ($category as $value) {
                    ?>
                        <option value="<?=$value->category_id; ?>"><?=$value->category_name; ?></option>
                    <?php } ?>
                </select>
            </div>
         <div class="col-sm-3 col-xs-4">
 <select name="subcategory" id="subcategory" class="form-control bottom-border" required>
                    <option value=""><?php echo get_phrase('subcategory');?> *</option>
                </select>
 
 
            </div>
 </div>
        <div class="form-group">
 
            <label for="product_name" class="col-sm-1 hidden-xs control-label hidden col-xs-2"><?php echo get_phrase('product_name');?>: *</label>
            <div class="col-sm-10 col-xs-12">
                <?=form_input('product_name', set_value('product_name'), 'id="product_name" placeholder="'.get_phrase('product_name').'" class="form-control bottom-border" required') ?>
            </div>
        </div>
  
        <div class="form-group">
            <label for="short_description" class="col-sm-1 hidden-xs control-label hidden col-xs-2"><?php echo get_phrase('short_description');?>: *</label>
            <div class="col-sm-5 col-xs-6">
                <?=form_input('short_description', '', 'id="short_description" placeholder="'.get_phrase('short_description').'" class="form-control bottom-border" required') ?>
            </div>
            <div class="col-sm-5 col-xs-6">
                <?=form_input('long_description', '', 'id="long_description" placeholder="'.get_phrase('long_description').'" class="form-control bottom-border" required') ?>
            </div>
        </div>
 
        <div class="form-group">
            <label for="relation" class="col-sm-2 hidden-xs control-label text-muted col-xs-2"><?php echo get_phrase('suppliers');?>: *</label>
            <div class="col-sm-6 col-xs-6">
                <select name="suppliers[]" multiple id="suppliers" class="form-control" required>
                    <?php 
                    $supplier = $this->db->get('supplier')->result();
                    foreach ($supplier as $value) {
                    ?>
                        <option value="<?=$value->supplier_id; ?>"><?=$value->supplier_name; ?></option>
                    <?php } ?>
                </select>
            </div>
          <button type="button" class="btn btn-outline btn-info btn-flat" data-toggle="modal" data-target="#supplierModal" style="margin-top: 20px;"> New Supplier </button>
  
          
        </div>
 
        <div class="form-group">
            <label for="cost_price" class="col-sm-1 hidden-xs control-label hidden col-xs-2"><?php echo get_phrase('cost_price');?>: </label>
            <div class="col-sm-10 col-xs-12">
                <?=form_input('cost_price', set_value('cost_price'), 'id="cost_price" placeholder="'.get_phrase('cost_price').'" class="form-control bottom-border"') ?>
            </div>
        </div>
        <div class="form-group">
            <label for="address" class="col-sm-1 hidden-xs control-label hidden col-xs-2"><?php echo get_phrase('selling_price');?>: </label>
            <div class="col-sm-10 col-xs-12">
                <?=form_input('selling_price', set_value('selling_price'), 'id="address" placeholder="'.get_phrase('selling_price').'" class="form-control bottom-border"') ?>
            </div>
        </div>
        <div class="form-group">
            <label for="supplier" class="col-sm-1 hidden-xs control-label hidden col-xs-2"><?php echo get_phrase('supplier');?>: </label>
            <div class="col-sm-10 col-xs-12">
                <?=form_input('supplier', set_value('supplier'), 'id="supplier" placeholder="'.get_phrase('supplier').'" class="form-control bottom-border"') ?>
            </div>
        </div>
        <div class="form-group">
            <label for="inventory" class="col-sm-1 hidden-xs control-label hidden col-xs-2"><?php echo get_phrase('inventory');?>: </label>
            <div class="col-sm-10 col-xs-12">
                <?=form_input('inventory', set_value('inventory'), 'id="inventory" placeholder="'.get_phrase('inventory').'" class="form-control bottom-border"') ?>
            </div>
        
        </div>

        <div>
            <button type="submit" class="btn btn-primary btn-flat col-xs-6 col-xs-offset-1"><i class="glyphicon glyphicon-ok"></i> <?php echo get_phrase('save');?></button>&nbsp;
            <button type="reset" class="btn btn-default btn-flat"><?php echo get_phrase('reset');?></button>
        </div>
        <?=form_close(); ?>
 
 
        <br/>
    </div><!-- /.box-body -->
</div><!-- /.box -->

<script>
    //AJAX call for getting items for selected supplier
    $('select#category').change(function() {
        var category = $(this).val();
       // console.log(contact_type);
        var link = '<?php echo base_url()?>'+'index.php/products/get_products_ajax/'+category;
        $.ajax({
            supplier_id: category,
            url: link
        }).done(function(option) {
//            console.log(option);
            if (option) {
                $('#subcategory').html(option);
            }else{
                $('#subcategory').html('<option><?php echo get_phrase('no_record_found'); ?></option>');
            };
            rowOption = option;
        });
    });

</script> 


Thanks in advance