Dropdown populated based on value selected from another dropdown

I know this question has been asked several times in the past, but none of the solutions seem to match what I am trying to accomplish, so after much searching and spending a couple of days learning AJAX (I’ve been able to avoid using it until now), this is what I have:

I have a dropdown of ‘regions’ populated from a database table. Another dropdown of ‘clusters’ (smaller areas within a region) is also populated from a database table. I want the clusters dropdown to only contain the clusters for a selected region.

I used JavaScript to determine the region_id of the selected region, and I want to send that value to a php variable which is used to pull the clusters from the database for the clusters dropdown:

$( ".edit-regions #region").on('change', function () {
        var regionId = this.value;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        var pageToSendTo = window.location.href  + "?";
        var VariablePlaceholder = "region=";
        var UrlToSend = pageToSendTo + VariablePlaceholder + regionId;
        xhr.open("GET", UrlToSend, false);

Here is my php code for capturing the region_id and using it to populate the clusters dropdown (using CodeIgniter 3 and its Form Helper):

    if (isset($_GET['region'])) {
        $region_id = $_GET['region'];
        $region_clusters = $this->registration_model->get_region_clusters($region_id);
  } else {
       $region_clusters = $this->registration_model->get_clusters();
<?php echo form_label('Cluster: ', 'cluster'); ?><br />
      $attributes = array(
             'id' => 'cluster'
      $region_cluster_options[''] = ' ------------------ ';            
      foreach ($region_clusters as $region_cluster) {
            $region_cluster_options[$region_cluster->cluster_id] = $region_cluster->cluster_name;
      echo form_dropdown('cluster_id', $region_cluster_options, set_value('cluster_id'), $attributes);

The code is falling down where the value of region_id is passed through the URL, and I use the $_GET to retrieve that value. Where am I going wrong?

1 Like

How far are you getting? if you inspect the network request can you see the region being sent through correctly? If so, the problem lies in your php.

As you’ve already got jQuery in the page you can simplify the code a lot.

$( ".edit-regions #region").on('change', function() {
  var regionId = this.value;
  var url = window.location.href + "?region=" + regionId;

1 Like

I’m picking up the region_id with my JavaScript. But I’m doing things all wrong because my page is refreshing and I think that is when I lose the $_GET value on my way over to the php.

Your version is definitely more compact than mine. Thank you.

Do I have to populate the second dropdown with AJAX also to avoid the page refresh?

I have absolutely no prior experience with AJAX - how do I inspect the network request?

1 Like

Ah, the false here makes a synchronous request which means a page refresh. Yes, jQuery simplifies Ajax a lot, though the upcoming fetch api is a lot simpler than working with XMLHttpRequest.

You just need to handle the response and then populate the second drop down with the response.
It looks like you’re sending HTML back so it will probably involve setting the innerHTML of the form to the html in the response.

$.ajax(url).then(function(resp) {

Have a look at the jquery docs for more info:

1 Like

The HTML in the response is the HTML that my code generates after it pulls the regions and clusters from the database, without filtering the clusters, so the cluster dropdown is not being affected by the choice of region.

I am still seeing http://localhost/ci_RC_CRM/admin/administrators/edit_regions after I select the region, even though my new url should be http://localhost/ci_RC_CRM/admin/administrators/edit_regions?region=2. So I can’t access that region=2 to determine what goes in the clusters dropdown.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.