• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Dynamic chained select menus

#1
[eluser]doubleplusgood[/eluser]
Hello,

I'm trying to do a database-driven chained select menu, with Manufacturers and Models.

Currently, I have a vehicles_model.php that is simply grabbing all of the Manufacturers and Models as follows;

Code:
public function getManufacturers(){
    $this->db->order_by("name", "asc");
    $query=$this->db->get('manufacturers');
    if($query->num_rows()>0){
        // return result set as an associative array
        return $query->result_array();
    }
}

public function getModels(){
    $this->db->order_by("name", "asc");
    $query=$this->db->get('models');
    if($query->num_rows()>0){
        // return result set as an associative array
        return $query->result_array();
    }
}

My controller looks like this;

Code:
$data['manufacturers'] = $this->vehicles->getManufacturers();
$data['models'] = $this->vehicles->getModels();
$this->load->view('account/add', $data);

And my page is currently displaying two independent select menus as so;

Code:
<div><div class="label">Manufacturer:</div>
    <select name="manufacturer">
        <option value="-">-</option>
        &lt;?php foreach($manufacturers as $item) : ?&gt;
        <option value="&lt;?php echo $item['id']?&gt;">&lt;?php echo $item['name']?&gt;</option>
        &lt;?php endforeach; ?&gt;
    </select></div>

    <div><div class="label">Model:</div>
        <select name="model">
            <option value="-">-</option>
            &lt;?php foreach($models as $item) : ?&gt;
            <option value="&lt;?php echo $item['id']?&gt;">&lt;?php echo $item['name']?&gt;</option>
            &lt;?php endforeach; ?&gt;
        </select></div>

As the post title suggests, I want to be able to display relevant Models in the 2nd select menu, based on the Manufacturer selected in the first select box.

I was wondering if anyone has any advice on how I could accomplish this?, presumably with jQuery.

Thank you.

#2
[eluser]carvingCode[/eluser]
No specific code for you this early in the morning, but:

1) Use jQuery to trigger function call on option select. There's many examples; basically bind a function call the option select.

2) Building new function (getModelsWhere()) and use '$this->db->get_where();'. Pass in the selected manufacturer.

BTW: Really like the structure of your CI code. I'm rather new to CI and it's cleared up some confusion. Thanks.

#3
[eluser]doubleplusgood[/eluser]
Hey, thanks for the compliment on the code. Heh, i've only been CodeIgniting for a few months myself.

I'll have to take a look at how I can integrate jQuery with something like this. Big Grin

#4
[eluser]tastatura[/eluser]
Hey, I am also interested in your solution. Did you find a way?

#5
[eluser]n0xie[/eluser]
A bit of code to get you started. Untested but should give you some ideas:
Code:
// js
    $('#manufacturer').change(function () {
        var id = $('#manufacturer option:selected').attr('value');
        $.post("/ajax/getModels", {manufacturer_id: id}, function (data) {
          if (data) {
            $('select#model').html(data);
            $('select#model').show();
          }
        });
    });

// html
<div><div class="label">Manufacturer:</div>
    <select name="manufacturer" id="manufacturer">
        <option value="-">-</option>
        &lt;?php foreach($manufacturers as $item) : ?&gt;
        <option value="&lt;?php echo $item['id']?&gt;">&lt;?php echo $item['name']?&gt;</option>
        &lt;?php endforeach; ?&gt;
    </select></div>

    <div><div class="label">Model:</div>
        <select name="model" id="model" style="display:none">
          <option></option>
        </select></div>

// ajax controller
function getModels()
{
  $id = $this->input->post('manufacturer_id');
  $data = $this->vehicles->getModels($id); // change model with a where clause
  // this should probably be in a view
  $html = '<option value="-">-</option>';
  foreach($models as $item)
  {
    $html .= '<option value="'.$item['id'].'">'.$item['name'].'</option>';
  }
  echo $thml
}


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.