Dynamic dropdown menus

[eluser]phester[/eluser]
This is not really a purely CI related question, but I was wondering if any of you have a quick easy solution!

I am trying to create 2 drop down menus where the options in the second menu is dependent on the value selected in the first menu. For example, let's say the first menu has the following options:

BMW
Mercedes
Lexus

The second option will have the following options depending on which value was selected:

If BMW was selected:
3 Series
5 Series
7 Series

If Lexus was selected:
IS
ES
GS
LS

And so on...

I am curious for a simple javascript solution using AJAX with jQuery or Prototype. I would like the options of the second menu be fed from a client side script using AJAX.

Any help is greatly appreciated!

[eluser]ELRafael[/eluser]
i recommend prototype

you can use ajax.updater(get_id, show_div, url, {parameters})

if you have some troubles if this, dial R for Rafael :-P

[eluser]Code Arachn!d[/eluser]
I built something like this with jQuery

Model:

Code:

class Module_car_make_model extends Model {

    function Module_car_make_model()
    {
        // Call the Model constructor
        parent::Model();
    }
    
    function makes_and_models()
    {
        $cars = array();
        $this->db->select('*');
        $this->db->from('vehicle_makes');
        $this->db->orderby('vehicle_make', 'asc');
        $makes = $this->db->get();
        foreach ($makes->result_array() as $make) {
            $this->db->select('vehicle_model');
            $this->db->from('vehicle_models');
            $this->db->orderby('vehicle_model', 'asc');
            $this->db->where('vehicle_make_id',$make['vehicle_make_id']);
            $models = $this->db->get();
            if(!isset($cars[$make['vehicle_make']])) $cars[$make['vehicle_make']] = array();
            foreach ($models->result_array() as $model) {
            array_push($cars[$make['vehicle_make']], $model['vehicle_model']);
            }
        }
        return $cars;
    }

}

HTML:

Code:

<?php

$makes_and_models = $this->module_car_make_model->makes_and_models();

$year_cur = date("Y");
$year_count = 50;

?>



<label>Vehicle Year*:</label>
<select name="vehicle_year" id="vehicle_year" class="inputs">
    <option value="">Select car year</option>
    &lt;?php while($year_count>0) { ?&gt;
    <option value="&lt;?=$year_cur?&gt;" &lt;?= $this->validation->set_select('vehicle_year', $year_cur); ?&gt;>&lt;?=$year_cur?&gt;</option>    
    &lt;?php $year_count--;$year_cur--;} ?&gt;
</select>
<label>Car Make*:</label>
<select name="vehicle_make" id="vehicle_make" class="inputs">
    <option value="">Select car make</option>
    &lt;?php foreach(array_keys($makes_and_models) as $make) { ?&gt;
    <option value="&lt;?= $make ?&gt;" &lt;?= $this->validation->set_select('vehicle_make', $make); ?&gt;>&lt;?= $make ?&gt;</option>
    &lt;?php } ?&gt;
</select>
<label>Car Model*:</label>
<select name="vehicle_model" id="vehicle_model" class="inputs">
    <option value="">Select car model</option>
</select>

Java!Script

Code:

makes=new Array();
models=new Array();
<?php foreach($makes_and_models as $make => $model) { ?>
models['<?=$make ?>']='<?= implode(",", $model) ?>';
<?php } ?>

function reload_make() {
  var strMake= $("#vehicle_make").selectedValues();
  var options = '<option value="">Select car model</option>';
  var items = models[strMake].split(",");
  for (var i = 0; i < items.length; i++) {
    options += '<option value="' + items[i] + '">' + items[i] + '</option>';
  }
  $("select#vehicle_model").html(options);
  $("option:first","select#vehicle_model").attr("selected","selected");
}

&lt;?= ($this->validation->vehicle_make != '') ? 'reload_make();' : '' ?&gt;
$("#vehicle_make").change(function(){
  var options = '<option value="">Select car model</option>';
  var items = models[$(this).val()].split(",");
  for (var i = 0; i < items.length; i++) {
    options += '<option value="' + items[i] + '">' + items[i] + '</option>';
  }
  $("select#vehicle_model").html(options);
  $("option:first","select#vehicle_model").attr("selected","selected");
});

I ended up not using it after I got it working so - the JS could be better optimized.

[eluser]xwero[/eluser]
if you are going the jquery way there are a few menu plugins available

[eluser]phester[/eluser]
Thank you all for your help. I found the perfect jQuery plugin for this. Check it out here.