CODEWITHSUNDEEP
phpjqueryjsoncodeigniter
musicvicious
musicvicious

Reputation: 1093

Populate a select based on other select

I don't understand how to populate a 2nd select based on the choice I made on the 1st select. What I want to do, is add a location. To add a location I have the first select that has 4 options: Continent, Country, Region an City. And, if for example I select the city type, I want in my 2nd select to show only the Regions where i can connect the city. If I chose a Country, than I want the 2nd select to show me only the continents.

so far i have this:

<p><label for="type_id">Tip de locatie:</label><br />

<select class="styled" name="type_id" id="type_id">
    <option value="0">Alege...</option>
    <?php
    foreach ($place_type as $key => $type) { ?>
        <option value="<?=$type['id']?>"><?=$type['name']?></option>
    <?php } ?>
</select>
</p>

<noscript>
<input type="submit" name="action" value="Load Parents" />
</noscript>

<p><label for="parent_id">Leaga de:</label> <br />

<select class="styled" name="parent_id" id="parent_id">
    <option value="0">Alege...</option>
    <?php
    foreach ($places as $key => $place) { ?>
        <option value="<?=$place['id']?>"><?=$place['name']?></option>
    <?php } ?>
</select>
</p>

I am using codeigniter framework, and i have this method in the controller:

public function get_place_parent()
{
    $this->load->model('places_model');
    $places = $this->places_model->get_places();
    $places = json_encode($places);
    return $places;
}

and the jQuery

<script type="text/javascript" charset="utf-8">
$(function(){
  $("select#type_id").change(function(){
    $.getJSON("<?=site_url('admin/get_place_parent')?>",{type_id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + i + '">' + j[i] + '</option>';
      }
      $("select#parent_id").html(options);
    })
  })
})
</script>

I don't really understand how to do this. It is based on this tutorial: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

Thank you in advance!

Upvotes: 1

Views: 2438

Answers (2)

Rick Calder
Rick Calder

Reputation: 18685

Below is a snippet from one of my applications that does exactly what you're after.

companyNames is the id of the first dropdown, that is a list of the companies registered with us. When that changes it makes an ajax call to the admin/getAddresses function and sends the id from the companyNames dropdown. I included the controller function too, you can figure out the model as that won't be relevant to your application.

The controller then returns a json response with the data for the second dropdown which gets populated by the success function in the ajax cotnrol. First it removes any options already there (otherwise you keep appending every time you change the first dropdown) then it appends the new options from the json the controller returned.

View 

$(document).on("change", "#companyNames", function() {
    $row = $(this).closest('tr');
    $.ajax({
        type: "GET",
        url: "<?=base_url()?>admin/getAddresses/",
        data: $row.find('input,select').serialize(),
    dataType: "json",
        success: function(content) {
            if (content.status == "success") {
            $("#companyAddresses").find('option').remove();
            $.each(content.message, function(key, val) {
            $("#companyAddresses").append(
            '<option value="' + key + '">' + val + '</option>'
            );
            });
            } else {                
                $("#error").html('<p>'+content.message+'</p>');
            }
        }
    });
    return false;
});

Controller

public function getAddresses()
{
    $data = $this->input->getArray();
    $this->load->model('companies');
    $data['companyAddresses']=$this->companies->getCompanyAddresses($data['addCompany']);
    print json_encode(array("status"=>"success", "message"=>$data['companyAddresses']));
}

Upvotes: 1

Edwin Alex
Edwin Alex

Reputation: 5108

Please follow these steps

1) When you select a city type from a select box, you need a make an Ajax call in its onChange event.

2) Pass the selected city's id to the controller function.

3) Get the city's region from DB or wherever it is.

4) Then you can construct your options in controller function itself or you can pass it to Ajax function and construct your options in there also.

5) Add the constructed options in the regions select box.

Upvotes: 0

Related Questions