Chained DropDownLists

[eluser]GabrieleMartino[/eluser]
I have, lets say 2 DropDownList, which i visualize in a page.
The value of the 2 DropDownList comes from the same db of the kind column1, column2. I would like that when a value in column1 is selected from DropDownList1, it display on DropDownList2 all the corresponding value of column2. I know how to perform the querys in the model but i don't know how to refresh the dropdownlist2 each time column1 is selected.

Any suggestion would be appreciate.

[eluser]PhilTem[/eluser]
You need to somehow submit the form in order to get the selected dropdown1-item. If you do this with an

Code:

onChange="this.form.submit();"

or with some more fancy things like AJAX is totally up to you. And how advanced your either skills are

[eluser]jojo777[/eluser]
Sorry i'm not english native but if i'm not wrong you are asking about 2 dependent select list.

I had that problem in a project. It was about Island and City. I finally did it with jQuery/AJAX.

Try this.

Code:

$(document).ready(function(){  
  $("#idselect1").bind('change', function(){
            load_select2();
  });
});

So wen you choose an option in option list number 1 you will launch load_select2(). Its like this.

Code:

function load_select2(callback){
        //alert('hi dude!');
   if($("#idselect1").val()!=""){
    // set the variable
    var dato=$("#idselect1").val();
    //AJAX
    $.ajax({
     type:"POST",
     dataType:"html",
     //i think base_url is not necesary, but only in case you need full path.
     url:base_url+"your_controller/your_load_optionlist_function",
     data:"idselect1="+dato,
     success:function(msg){
      // when the controller's function end it'll load a view with all the options
      $("#idselect2").empty().removeAttr("disabled").append(msg);
                        callback();
     }
    });
   }else{
    $("#idselect2").empty().attr("disabled","disabled");
   }
    }

And in your controller

Code:

function your_load_optionlist_function()
        {
            $id1 = $this->input->post('idselect1');
            $data['results'] = your_model->your_query($id1);
            $this->load->view("myview/select_list_2",$data);
     }

So your view is simple foreach inside an option tag...

Code:

<option value="-1">SELECT</option>
&lt;?php
foreach($results as $row)
{
# stuff...
}
?&gt;

Hope it helps dude! Maybe there are other options to do this, but this one worked for me.

[eluser]GabrieleMartino[/eluser]
I prepared the model the controller and the view.

I tryed with ajax.

But the success function is not invoked.

I'm sure the path of url is correct.

What can be.

I followed this thread...

http://ellislab.com/forums/viewthread/199987/

[eluser]jojo777[/eluser]
[quote author="GabrieleMartino" date="1351166731"]I prepared the model the controller and the view.

I tryed with ajax.

But the success function is not invoked.

I'm sure the path of url is correct.

What can be.

I followed this thread...

http://ellislab.com/forums/viewthread/199987/[/quote]

It shoul work with the above code i wrote.

Post more info.

[eluser]GabrieleMartino[/eluser]
My Model

Code:

<?php
class Topics_model extends CI_Model {

public function __construct()
{
  $this->load->database();
}

public function get_primary_topics($topic = FALSE)
{
  if ($topic=== FALSE)
  {
   $this->db->group_by('primary');
   $this->db->select('primary');
   $query = $this->db->get('topics');
   return $query->result_array();
  }
  
  $query = $this->db->get_where('topics', array('primary' => $topic));
  return $query->row_array();
}

public function get_secondary_topics($topic_primary = FALSE)
{
   $this->db->select('id, secondary');
   if ($topic_primary !== FALSE)
   {
    $this->db->where('primary', $topic_primary);
   }
  
   $query = $this->db->get('topics');
  
   $secondaries =array();
  
   if($query->result())
   {
    foreach ($query->result() as $sec)
    {
     $secondaries[$sec->id] = $sec->secondary;
    }
    return $secondaries;
   }
   else
   {
    return FALSE;
   }
  
  } //chiusura get_secondary
}
?>

My controller

Code:

<?php
class Topics extends CI_Controller {

public function __construct()
{
  parent::__construct();
  $this->load->model('topics_model');
}

public function get_secondary_topics($primary){
  header('Content-Type: application/x-json; charset=utf-8');
  echo json_encode($this->topics_model->get_secondary_topics($primary));
}
}
?>

My View

Code:

<?php echo form_open('pages/home'); ?>
<?php $primary['#']='Please Select'?>
<?php $secondary['#'] = 'Please Select'; ?>
&lt;?php echo form_dropdown('topic_primary', $primaries, '#', 'id="primary"'); ?&gt;<br />
&lt;?php echo form_dropdown('topic_secondary', $secondaries, '#', 'id="secondary"'); ?&gt;<br />

[removed]

$(document).ready(function(){
$('#secondary').hide();
    $('#primary').change( function()
    {
     $('#secondary').show();
        var primary = $('#primary option:selected').text();
            $.ajax(
            {
                type: "POST",
                url:"topics/get_secondary_topics/"+primary,
                success: function(secondaries)
                {
                    alert("sono 1");
                    $('#secondary').empty();
                    alert("sono 2");
                    $.each(secondaries,function(id_secondary, secondary)
                    {
                        var opt = $('<option />');
                        opt.val(id_secondary);
                        opt.text(secondary);
                        $('#secondary').append(opt);
                    });            
                }
            });
    });
});  

[removed]
&lt;?php echo form_close(); ?&gt;

[eluser]GabrieleMartino[/eluser]
I tried to add also

Code:

dataType: "json", in $.ajax( ...)

[eluser]jojo777[/eluser]
Did you try my code?

Give some time I'll try see your code in a few

[eluser]GabrieleMartino[/eluser]
[quote author="jojo777" date="1351169120"]Did you try my code?

Give some time I'll try see your code in a few[/quote]

I'm trying to get how to work with your code.

[eluser]GabrieleMartino[/eluser]
I don't understand how the msg variable is returned.