Welcome Guest, Not a member yet? Register   Sign In
Populating Multiple Select Boxes
#1

[eluser]YellowShadow[/eluser]
Hey, I'm kinda stuck.

I have a database and I want to be able to make different select boxes. So for example someone chooses a value in the first select box and then the second select box is populated with information from the database based on the selection from the first select box.

Can anyone help?
#2

[eluser]smilie[/eluser]
Where are you stuck at exactly?
I am using same concept in combination with jQuery ajax();
#3

[eluser]YellowShadow[/eluser]
How would I get the fields that need to be populated based on the results of the first selection box from the database using the controller?
#4

[eluser]smilie[/eluser]
someviewfile.php
Code:
<select id="first">
<option value="1">Milk</option>
<option value="2">Sugar</option>
</select>

<div id="second_div">
<select id="second">
<option value="">Please select from the first one...</option>
</select>
</div>

Then (at least I am using jquery - you use any other js / ajax combination) in the
Code:
&lt; script type text/js &gt;
// JS Ajax call to update billing or auto incasso
$("#first").change(function(){
    var type = this.val();
    // Then, call Ajax to process request :)
    $.ajax({
        url: "&lt;?php echo base_url();?&gt;somecontroller/somefunction",
        type: "POST",
        data: ({
            type: type,
        }),
        dataType: "html",
        async:true,
        success: function(msg){
            if(msg)
            {
                             $("#second_div").html(msg);
            }
            else
            {
                alert('Could not get any DB data for second select...');
            }
        }
     });
});

< / script>

somecontroller.php
And your somecontroller/somefunction should have:
Code:
function somefunction()
{
    $data = $this->db->select('*')->from('second')->where('type',$this->input->post('type'))->get->result_array();
    // Prepare drop down box
    $dd = '<select id="second">';
    foreach($data as $key=>$val)
    {
        $dd .= '<option value="'.$key.'">'.$val.'</option>';
    }
    $dd .= '</select>';
    echo $dd;
}

Do not forget to include jquery.min.js in your CI Smile

Have fun...

Cheers,
Smilie
#5

[eluser]YellowShadow[/eluser]
That's not working for me Sad

I did this in my view
Code:
[removed]
    $(document).ready(function(){
        $("#yearSelect").change(function(){
            var year = this.val();
            // Then, call Ajax to process request :)
            $.ajax({
                url: "&lt;?php echo base_url();?&gt;enginekits/PopulateMakes",
                type: "POST",
                data: ({
                    type: year,
                }),
                dataType: "html",
                async:true,
                success: function(msg){
                    if(msg)
                    {
                                     $("#makeDiv").html(msg);
                    }
                    else
                    {
                        alert('Could not get any DB data for second select...');
                    }
                }
             });
        });
    });
[removed]

<div id="pageText"> &lt;!-- Start pageText --&gt;
    <h1 class="pageTitle">Select Kit</h1>
    <div id="pageContent">
        <table>
            <tr>
                <td>
                    Year:<br />
                    <select id="yearSelect" name="year" size="10" style="width: 70px">
                        &lt;?php foreach ($kitYears as $key => $val): ?&gt;
                            <option value="&lt;?php echo $val; ?&gt;">&lt;?php echo $val; ?&gt;</option>
                        &lt;?php endforeach; ?&gt;
                    </select>
                </td>
                <td>
                    <div id="makeDiv">
                        Make:<br />
                        <select id="makeSelect" name="make" size="10" style="width: 70px">
                        </select>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div> &lt;!-- End pageText --&gt;

And this is my function:
Code:
public function PopulateMake()
    {
        $year = $this->input->post('year');
        $makes = $this->EngineKitsModel->GetMakes($year);
        
        $newSelect = '<select id="makeSelect">';
        foreach ($makes->result() as $row)
        {
            $newSelect .= '<option value="'.$row->Make.'">'.$row->Make.'</option>';
        }
        $newSelect .= '</select>';
        
        echo $newSelect;
    }

I tested out the function and it works correctly, its just not displaying it on the second select box. I included jquery too...
#6

[eluser]smilie[/eluser]
Hi,

You have following error:

In you Ajax call (in the view file) you have:

data: ({
type: year,
}),

This means, that you will post variable 'type' which holds info about chosen year.

In your controller: &lt;?php echo base_url();?&gt;enginekits/PopulateMakes

You will therefore have: $this->input->post('type') and not $this->input->post('year');

Change that and it should work.

Cheers,
Smilie
#7

[eluser]YellowShadow[/eluser]
I tried that but it still doesn't work.
#8

[eluser]YellowShadow[/eluser]
I figured it out and got it to work Smile
#9

[eluser]Truong Le[/eluser]
[quote author="YellowShadow" date="1310605294"]I figured it out and got it to work Smile[/quote]
Please help me!

I'm trying, but not yes.Sick
Code:
&lt; script type=text/js src="&lt;?php echo base_url()?&gt;js/jquery.min.js"&gt;&lt;/ script >
<tr>
                            <td class="tdSearch">For Cruises</td>
                         <td class="tdSearch2">
                                <select class="required inputText" name="junk_id" id="cruise" >
                                    <option value="">(select)</option>
                                    &lt;?php foreach($junk as $key => $cruise):?&gt;
                                    <option value="&lt;?php echo $key ?&gt;"> &nbsp;&lt;?php echo $cruise ?&gt;</option>
                                    &lt;? endforeach ?&gt;
                                
                                </select>
                            </td>
                        </tr>
                      
                        
      <tr>
                         <td class="tdSearch">Duration</td>
                         <td class="tdSearch2">
                            <div id="durationDiv">
                             <select class="inputText" name="tour_duration" id="durations">
                 <option value="">(select)</option>
                              
                            </select>
                            </div>
                         </td>
                        </tr>
&lt;script&gt;
    // JS Ajax call to update billing or auto incasso
    $("#cruise").change(function(){
        var junk_id = this.val();
        // Then, call Ajax to process request :)
        $.ajax({
            url: "&lt;?php echo base_url();?&gt;backend/admin_tour/populate",
            type: "POST",
            data: ({
                type: junk_id,
            }),
            dataType: "html",
            async:true,
            success: function(msg){
                if(msg)
                {
                                 $("#durationDiv").html(msg);
                }
                else
                {
                    alert('Could not get any DB data for second select...');
                }
            }
         });
    });
    
    &lt;/ script&gt; 

This is my function populate: (function tested and OK )
Code:
function populate()
{
     $id = $this->input->post('type');
        
        $q = $this->bone_mod->get_all('junk_itineraries',$id);
        $cruises = $this->formatArrayToIdName($q->result_array());
        
        $select = '<select id="durations">';
        foreach($cruises as $key => $row){
            $select .='<option value="'.$key.'">'.$row.'</option>';
        }
        $select .='</select>';
        echo $select;
       }

And ...
Code:
private function formatArrayToIdName($data) {
  $result = array();
  foreach ($data as $row) {
   $result[$row['junk_itineraries_value']] = $row['junk_itineraries_name'];
  }
  return $result;

Help me!
Thanks very much!




Theme © iAndrew 2016 - Forum software by © MyBB