Dynamic dropdown menus - Printable Version

Dynamic dropdown menus - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Dynamic dropdown menus (/showthread.php?tid=3871)

Dynamic dropdown menus - El Forum - 10-26-2007

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

Dynamic dropdown menus - El Forum - 10-26-2007

[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

Dynamic dropdown menus - El Forum - 10-26-2007

[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:
&lt;?php 

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

$year_cur = date("Y");

$year_count = 50;

?&gt;

<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();

&lt;?php foreach($makes_and_models as $make => $model) { ?&gt;

models['&lt;?=$make ?&gt;']='&lt;?= implode(",", $model) ?&gt;';

&lt;?php } ?&gt;

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.

Dynamic dropdown menus - El Forum - 10-26-2007

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

Dynamic dropdown menus - El Forum - 10-26-2007

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