Dynamic dropdown menus

[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.