[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>
<?php while($year_count>0) { ?>
<option value="<?=$year_cur?>" <?= $this->validation->set_select('vehicle_year', $year_cur); ?>><?=$year_cur?></option>
<?php $year_count--;$year_cur--;} ?>
</select>
<label>Car Make*:</label>
<select name="vehicle_make" id="vehicle_make" class="inputs">
<option value="">Select car make</option>
<?php foreach(array_keys($makes_and_models) as $make) { ?>
<option value="<?= $make ?>" <?= $this->validation->set_select('vehicle_make', $make); ?>><?= $make ?></option>
<?php } ?>
</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");
}
<?= ($this->validation->vehicle_make != '') ? 'reload_make();' : '' ?>
$("#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.