Welcome Guest, Not a member yet? Register   Sign In
Populate dropdown based on another dropdown selection using jquery
#1

[eluser]moriokasan[/eluser]
Hi all, I have a dropdown with providers and one with products. I want when I select a provider to have the second drop down with products from the selected provider.
Can anyone help me to populate the second dropdown ?

my view is:
Code:
<html>

        <head>
                
                <style type="text/css">
                        select {
                                background-color: #134553;
                                color: #ffffff;
                                width: 200px;
                                position: relative;
                                margin: 0 auto;
                                top: 50px;
                                font-size: 24px;
                        }
                </style>
                [removed]config->item('base_url');?>lib/jquery-1.6.1.min-dev.js">[removed]
                 [removed]

                        function refresh_products(){
                                var selected_provider = $('#providers option:selected').val();
                                $('#products').load("/test/dropdown/getproducts/777".replace("777", selected_provider));
                                alert(selected_provider);
                        }

                        $(document).ready(function(){
                                $('#providers').change(refresh_products);
                        });

                [removed]
        </head>


        <body>
                <h1> testing jquery dropdown in cascade</h1>

                &lt;input type="text" id="debug"&gt;Debug text&lt;/input&gt;&lt;br></br>

                <select id="providers" name="providers">
                &lt;?php if(isset($providers)) : foreach($providers as $provider) : ?&gt;
                        <option value=&lt;?php echo $provider->id; ?&gt;>
                                &lt;?php echo $provider->name; ?&gt;
                        </option>                        
                &lt;?php endforeach; endif; ?&gt;
                </select>

                <select id="products" name="products">
                </select>
        &lt;/body&gt;


&lt;/html&gt;
and the controller:

Code:
class Dropdown extends CI_Controller
{

    function index()
    {
        //check session
                $this->load->library('Mysession');
                if ($this->mysession->isInactive($this)) return;

                $this->load->model('crud2_model');

                if($query2 = $this->crud2_model->select_all('select p.id, p.name from expenses_providers p order by p.name asc'))
                {
                        $data['providers'] = $query2;
                }
                else
                {
                        $data['providers'] = array();
                }
                

                
        $this->load->view('test/dropdown', $data);
    }
        
        function getproducts()
    {
        //check session
                $this->load->library('Mysession');
                if ($this->mysession->isInactive($this)) return;

                $this->load->model('crud2_model');

                if($query2 = $this->crud2_model->select_all('select p.id, p.name from expenses_products p where p.providerid = '.$this->uri->segment(4).' order by p.name asc'))
                {
                        $data['products'] = $query2;
                }
                else
                {
                        $data['products'] = array();
                }
                $results = $query2->result();
                $returnValue = "";
                foreach($results as $result)
                {
                        $returnValue = $returnValue."<option value=".$result->id.">".$result->name."</option>";
                }
                return $returnValue;
    }
    
}

The alert screen shows the correct selected value...
What happens is that when I select anything in the first drop down the second is populated with extremely many empty records. I am to tired to figure this one out so any help is appreciated. Thank you!
#2

[eluser]toopay[/eluser]
Did you check the returned data from your controller?
#3

[eluser]moriokasan[/eluser]
You are perfectly right, thank you! I resolved my issue today and I wanted to post the solution here, anyway, for others. It seems that a rested brain is a lot better than a sleepy one. So here is the solution that works (it is just a simple example)

Controller:
Code:
function index()
    {
        //check session
                $this->load->library('Mysession');
                if ($this->mysession->isInactive($this)) return;

                $this->load->model('crud2_model');

                if($query2 = $this->crud2_model->select_all('select p.id, p.name from expenses_providers p order by p.name asc'))
                {
                        $data['providers'] = $query2;
                }
                else
                {
                        $data['providers'] = array();
                }
                

                
        $this->load->view('test/dropdown', $data);
    }
        
        function getproducts()
    {
        //check session
                //$this->load->library('Mysession');
                //if ($this->mysession->isInactive($this)) return;
                
                

                $this->load->model('crud_model');

                $query2 = $this->crud_model->select_all_for_parentid('expenses_products', 'providerid', $this->uri->segment(4));
                
                
                
                foreach($query2 as $result)
                {
                        echo "<option value=".$result->id.">".$result->name."</option>";
                }
                
    }


Then the view looks like this

Code:
[removed]

                        function refresh_products(){
                                var selected_provider = $('#providers option:selected').val();
                                    
                                $('#products').load("/test/dropdown/getproducts/"+selected_provider);
                                
                        }

                        $(document).ready(function(){
                                refresh_products();
                                $('#providers').change(refresh_products);
                        });

                [removed]
        &lt;/head&gt;


        &lt;body&gt;
                <h1> testing jquery dropdown in cascade</h1>

                &lt;input type="text" id="debug"&gt;Debug text&lt;/input&gt;&lt;br></br>

                <select id="providers" name="providers">
                &lt;?php if(isset($providers)) : foreach($providers as $provider) : ?&gt;
                        <option value=&lt;?php echo $provider->id; ?&gt;>
                                &lt;?php echo $provider->name; ?&gt;
                        </option>                        
                &lt;?php endforeach; endif; ?&gt;
                </select>

                <select id="products" name="products">
                </select>
        &lt;/body&gt;

I hope this helps someone!

All the best!

Marius




Theme © iAndrew 2016 - Forum software by © MyBB