n/a Change values in one list box based on selection in another

[eluser]shades[/eluser]
I have this in my html view
<div class="field">
<label for="type">Brand </label>
<select name="category_id" id="category_id" class="medium">
<optgroup label="Brand Avilable">
<option value="null" selected="selected">Choose Category</option>
&lt;?php foreach($brandList->result() as $row): ?&gt;
<option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
&lt;?php endforeach; ?&gt;
</optgroup>
</select>
</div>
<div class="field">
<label for="type">Category </label>
<select name="category_id" id="category_id" class="medium">
<optgroup label="Category Avilable">
<option value="null" selected="selected">Choose Category</option>
&lt;?php foreach($categoryList->result() as $row): ?&gt;
<option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
&lt;?php endforeach; ?&gt;

</optgroup>
</select>
</div>


now i want to list only the category of selected brand from brand list

the category table have foreign key or brand id in it

[eluser]Atharva[/eluser]
First of all, use code blocks to post your code in the forum.

Second thing is, how come both of your select boxes have same name and id?

[eluser]cideveloper[/eluser]
There are a number of things wrong here, two of which have already been mentioned. The label "for" value Specifies which form element a label is bound to. You are binding it to type which obviously is not displayed here. I understand it is annoying to type things over and over again, but if you must copy and paste you should remember to make your changes appropriately.

Personally I would drop the optgroup because The <optgroup> tag is used to group together related options in a select list. From the looks of it you will not be grouping in the select list.

Code:

<div class="field">
  <label for="type">Brand Available</label>
        <option value="null" selected="selected">Choose Brand</option>
        &lt;?php foreach($brandList->result() as $row): ?&gt;
        <option value=”&lt;?=$row->id;?&gt;”>&lt;?=$row->name;?&gt;</option>
        &lt;?php endforeach; ?&gt;
  </select>
</div>
<div class="field">
  <label for="type">Category Available</label>
  <select name="category_id" id="category_id" class="medium">
        &lt;?php foreach($categoryList->result() as $row): ?&gt;
        <option value=”&lt;?=$row->id;?&gt;”>&lt;?=$row->name;?&gt;</option>
        &lt;?php endforeach; ?&gt;
  </select>
</div>

What is $categoryList returning. Is it the all the categories not depending on the brand. Do not do that. I would drop the first option in both of them, the ones with the null value and just return all the Brands and the categoryList for the first brand in the brandList. Then using javascript check for a change event in the select with id brand_id. I use jquery so it will look something like this

Code:

$('#brand_id').change(function() {
  //do processing here;
});

your processing will call a controller/function that will return category options and insert them into category_id select while removing the current ones.

[eluser]shades[/eluser]
here is my controller which gives that $categoryList and $brand list

function add_new()
{
$data['title']="Add Product";
$data['categoryList']=$this->category_model->get_category();
$data['brandList']=$this->brand_model->get_data();
$data['main_content']='product/add';
$this->load->view('template/template',$data);
}

my view is this

<div class="field">
<label for="type">Brand </label>
<select name="brand_id" id="brand_id" class="medium">
<optgroup label="Brand Avilable">
<option value="null" selected="selected">Choose Category</option>
&lt;?php foreach($brandList->result() as $row): ?&gt;
<option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
&lt;?php endforeach; ?&gt;
</optgroup>
</select>
</div>
<div class="field">
<label for="type">Category </label>
<select name="category_id" id="category_id" class="medium">
<optgroup label="Category Avilable">
<option value="null" selected="selected">Choose Category</option>
&lt;?php foreach($categoryList->result() as $row): ?&gt;
<option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
&lt;?php endforeach; ?&gt;
</optgroup>
</select>
</div>

please give me the detail code

[eluser]cideveloper[/eluser]
the models are very importnat to see. Please provide those as well. Both category_model->get_category() and brand_model->get_data(). Also like Atharva said please use code blocks for code. It makes it more readable.

[eluser]shades[/eluser]
here are the model files content

Code:

<?php
class Brand_model extends Model{

    function get_data()
    {
        $query=$this->db->get('tbl_brand');
        return $query;
    }
    
}

Code:

<?php
class Category_model extends Model{    
    function get_category(){
    $query=$this->db->get('tbl_category');
    return $query;
    }    
    

}

[eluser]cideveloper[/eluser]
ok so some modifications have been made but I think you can figure it out after this. What happens is add_new gets all brands but only the categories for brand_id = 1. The javascript looks for a change event and sends a get request to get_cat which gets the categories for the specific id changed to. Its not perfect but works well.

Controller

Code:

function add_new(){
        
        $brand_id = 1;
        $data["title"]="Add Product";
        $data["brandList"]=$this->brand_model->get_data();
        $data["categoryList"]=$this->category_model->get_category($brand_id);
        $data["main_content"]="product/add";
        $this->load->view("ci176981",$data);
    }

    function get_cat($brand_id=null) {
        $data["categoryList"] = $this->category_model->get_category($brand_id)->result();
        echo json_encode($data);
    }

Category_model

Code:

function get_category($brand_id=null){
        if($brand_id) {
            $this->db->where('brand_id',$brand_id);
        }
        return $this->db->get('tbl_category');
    }

Brand_model

Code:

function get_data(){
        $query=$this->db->get('tbl_brand');
        return $query;
    }

View

Code:

<!DOCTYPE HTML>
&lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;&lt;?=$title;?&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="&lt;?=base_url()?&gt;assets/css/site.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <div class="field">
            <label for="brand_id">Brand Available</label>
            <select name="brand_id" id="brand_id" class="medium">
            &lt;?php foreach($brandList->result() as $row): ?&gt;
            <option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
            &lt;?php endforeach; ?&gt;  
            </select>
        </div>
        <div class="field">
            <label for="category_id">Category Available</label>
            <select name="category_id" id="category_id" class="medium">
            &lt;?php foreach($categoryList->result() as $row): ?&gt;
            <option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
            &lt;?php endforeach; ?&gt;
            </select>
        </div>
        [removed][removed]
        [removed][removed]
    &lt;/body&gt;
&lt;/html&gt;

Javascript

Code:

$(function(){

$('#brand_id').change(function(e){

    $.get('get_cat/'+$(this).val(), function(data) {
        var new_cat_list = ""
        for (var i=0; i<data.categoryList.length; i++)
        {
            new_cat_list += '<option value="'+data.categoryList[i].id+'">'+data.categoryList[i].name+'</option>';
        }
        $('#category_id').html(new_cat_list);
    }, 'json');

});

});

[eluser]shades[/eluser]

Code:

[removed]
$(function(){

$('#brand_id').change(function(e){

    $.get('get_cat/'+$(this).val(), function(data) {
        var new_cat_list = ""
        for (var i=0; i<data.categoryList.length; i++)
        {
            new_cat_list += '<option value="'+data.categoryList[i].id+'">'+data.categoryList[i].name+'</option>';
        }
        $('#category_id').html(new_cat_list);
    }, 'json');

});

});  
[removed]
<div id="content" class="xfluid">
        <div class="portlet x7">
            <div class="portlet-header"><h4>Add Category</h4></div>
            <div class="portlet-content">    
                        &lt;?php echo form_open('product/add', array('class'=>'form label-inline'));?&gt;            
                            <div class="field">
                              <label for="fname">Product Name</label>
                              &lt;input id="name" name="name" size="50" type="text" class="medium" /&gt;&lt;/div>                    
                            <div class="field">
                              <label for="lname">SKU / Code No</label>
                                &lt;input id="sku" name="sku" size="50" type="text" class="medium" /&gt;&lt;/div>            
                              <div class="field"><label for="lname">Color </label>
                                &lt;input id="color" name="color" size="50" type="text" class="medium" /&gt;&lt;/div>
                                <div class="field">
                                <label for="type">Brand </label>
                                <select name="brand_id" id="brand_id" class="medium">
                                    <optgroup label="Brand Avilable">
                                        <option value="null" selected="selected">Choose Category</option>
                                            &lt;?php foreach($brandList->result() as $row): ?&gt;
                                            <option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
                                            &lt;?php endforeach; ?&gt;                
                                    </optgroup>
                                </select>
                            </div>
                            <div class="field">
                                <label for="type">Category  </label>
                                <select name="category_id" id="category_id" class="medium">
                                    <optgroup label="Category Avilable">
                                        <option value="null" selected="selected">Choose Category</option>
                                            &lt;?php foreach($categoryList->result() as $row): ?&gt;
                                            <option value="&lt;?=$row->id;?&gt;">&lt;?=$row->name;?&gt;</option>
                                            &lt;?php endforeach; ?&gt;
                
                                    </optgroup>
                                </select>
                            </div>
                                
                              <div class="field"><label for="lname">Size </label> &lt;input id="size" name="size" size="50" type="text" class="medium" /&gt;&lt;/div>
                               <div class="field"><label for="lname">Qty </label> &lt;input id="qty" name="qty" size="50" type="text" class="medium" /&gt;&lt;/div>
                            <div class="field"><label for="lname">Unit Price </label> &lt;input id="price" name="price" size="50" type="text" class="medium" /&gt;&lt;/div>
                            
<br />
                            <div class="buttonrow">
                                <button class="btn" type="submit">Add Product</button>
                            </div>
                        &lt;/form&gt;            
            </div>
        </div>
            

        </div>

above is the view which i have made from ur code but i didnt understand that how it passes to the controller for second brand id to populate furthre