Efficient method for preserving dependent dropdown selections with Select2 and Ajax

Question

Efficient method for preserving dependent dropdown selections with Select2 and Ajax

I'm currently working on a script that dynamically populates the state dropdown menu based on the selected country id. Everything seems to be functioning correctly, but I've encountered an issue where I can only save the country selection using html localStorage upon page reload, and not the state option.

Below is the code snippet in question:

$(document).ready(function() {
  var country_id = null;
  var state_id = null;

  $('#country').select2();
  $('#state').select2();
  $('#city').select2();

  $('select[name="country"]').on('change', function() {
    var country_id = $(this).val();
    if (country_id) {
      $.ajax({
        url: "/world/getStates.php",
        type: "GET",
        data: {
          'country_id': country_id
        },
        dataType: "json",
        success: function(data) {
          $('select[name="state"]').empty();
          $('select[name="city"]').empty();
          $('select[name="state"]').append('<option value="">Select State</option>');
          $.each(JSON.parse(data), function(key, value) {
            $('select[name="state"]').append('<option value="' + value.id + '">' + value.name + '</option>');
          });
        }
      });
    } else {
      $('select[name="state"]').empty();
    }
  });

  // More code for handling state selection...

  $('#country').val("value from localStorage").trigger('change');
  $('#state').val("value from localStorage").trigger('change');
});

// Additional styling and scripts here...

After implementing this logic, I noticed that the country selection is successfully retrieved from localStorage and triggers the change event, but the same process does not apply to the state selection. Any insights on what might be causing this discrepancy?

javascript ajax jquery-select2

Answer 1

Answer №1

After the ajax call is successful, the options in the state dropdown are loaded. If your code fires the .val() before the options are loaded, the selected value will not be marked inside the state dropdown. To solve this issue, you should move that part of the code inside the success function of the ajax call and then trigger the change event after the options have been appended to the state dropdown.

Here is a Demo Code:

$(document).ready(function() {

  var country_id = 1 //localStorage.getItem("select2CountryValue");
  var state_id = 3 //localStorage.getItem("select2StateValue");
  var page_load = true; //added this 
  var data = [{
    "id": 1,
    "name": "xyz_State1"
  }, {
    "id": 2,
    "name": "xyz_State2"
  }, {
    "id": 3,
    "name": "xyz_State3"
  }] //this is just the demo datas
  $('#country').select2();
  $('#state').select2();

  $('select[name="country"]').on('change', function() {
    var country_id = $(this).val();
    
    if (country_id) {
      $('select[name="state"]').empty();
      $('select[name="state"]').append('<option value="">Select State</option>');
      $.each(data, function(key, value) {
        $('select[name="state"]').append('<option value="' + value.id + '">' + value.name + '</option>');
      });
      
      if (page_load == true) {
        $('#state').val(state_id).trigger('change'); 
        page_load = false; 
      }
      
    } else {
      $('select[name="state"]').empty();
    }
  });

  $('#country').val(country_id).trigger('change');

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<p>
  <span>Country</span>
  <select class="csc-select" name="country" id="country">
    <option value="">Select Country</option>
    <option value="1">
      xyz
    </option>
    <option value="2">
      xyz2
    </option>
  </select>
</p>
<p>
  <span>State</span>
  <select class="csc-select" name="state" id="state">
    <option value="">Select State</option>
  </select>
</p>

Answer 2

After the ajax call is successful, the options in the state dropdown are loaded. If your code fires the .val() before the options are loaded, the selected value will not be marked inside the state dropdown. To solve this issue, you should move that part of the code inside the success function of the ajax call and then trigger the change event after the options have been appended to the state dropdown.

Here is a Demo Code:

$(document).ready(function() {

  var country_id = 1 //localStorage.getItem("select2CountryValue");
  var state_id = 3 //localStorage.getItem("select2StateValue");
  var page_load = true; //added this 
  var data = [{
    "id": 1,
    "name": "xyz_State1"
  }, {
    "id": 2,
    "name": "xyz_State2"
  }, {
    "id": 3,
    "name": "xyz_State3"
  }] //this is just the demo datas
  $('#country').select2();
  $('#state').select2();

  $('select[name="country"]').on('change', function() {
    var country_id = $(this).val();
    
    if (country_id) {
      $('select[name="state"]').empty();
      $('select[name="state"]').append('<option value="">Select State</option>');
      $.each(data, function(key, value) {
        $('select[name="state"]').append('<option value="' + value.id + '">' + value.name + '</option>');
      });
      
      if (page_load == true) {
        $('#state').val(state_id).trigger('change'); 
        page_load = false; 
      }
      
    } else {
      $('select[name="state"]').empty();
    }
  });

  $('#country').val(country_id).trigger('change');

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<p>
  <span>Country</span>
  <select class="csc-select" name="country" id="country">
    <option value="">Select Country</option>
    <option value="1">
      xyz
    </option>
    <option value="2">
      xyz2
    </option>
  </select>
</p>
<p>
  <span>State</span>
  <select class="csc-select" name="state" id="state">
    <option value="">Select State</option>
  </select>
</p>

Answer 3

Answer №2

Once the change event is triggered for the country selection, the selected country is based on the localStorage value and the change is triggered successfully. However, when the change event is immediately triggered for the state selection right after that, it does not work as expected. What could be causing this issue?

The reason why triggering the change event for your #state list immediately after the country selection event fails is because at that moment, the state list is still empty. Consequently, there are no values to select, rendering the change event ineffective.

The recommended approach is to wait until the state list is populated with options before triggering the change event.

// To work immediately where countries are present in the HTML
$('#country').val("value from localStorage").trigger('change');

// For the state selection, trigger the change event within the success callback of the country Ajax request
$('#state').val("value from localStorage").trigger('change');

An alternative method involves creating a temporary option first:

$('#state').append("temporary <option> created from localStorage");
$('#state').val("value from localStorage").trigger('change');

This workaround eliminates the need to wait for the state list to populate before triggering the change event.

On another note, Select2 provides support for remote data retrieval, eliminating the manual handling of Ajax requests or option creation.

$("#country").select2({
  ajax: {
    url: "/world/getCountries.php"
  },
  placeholder: 'Pick a country',
  minimumInputLength: 1
}).change(function () {
  $("#state").val("").trigger("change");
});

$("#state").select2({
  ajax: {
    url: "/world/getStates.php",
    data: (params) => {
      // include selected country ID in URL parameters 
      params.country_id = $("#country").val();
      return params;
    }
  },
  placeholder: 'Pick a state',
  minimumInputLength: 1
});

// initialize selection using previous data...
$("#country").append('<option value="5">Switzerland</option>');
$("#country").val("5");
$("#state").append('<option value="9">Appenzell</option>');
$("#state").val("9");


// server side mock-up -------------------------------------------------
const countries = [
  {id: 1, text: 'Australia'},
  {id: 2, text: 'Denmark' },
  {id: 3, text: 'Japan'},
  {id: 4, text: 'Norway'},
  {id: 5, text: 'Switzerland'}
];
const states = [
  {id: 1, text: 'New South Wales', country_id: 1},
  {id: 2, text: 'Victoria', country_id: 1},
  {id: 3, text: 'Hovedstaden', country_id: 2},
  {id: 4, text: 'Midtjylland', country_id: 2},
  {id: 5, text: 'Hokkaido', country_id: 3},
  {id: 6, text: 'Shikoku', country_id: 3},
  {id: 7, text: 'Northern Norway', country_id: 4},
  {id: 8, text: 'Southern Norway', country_id: 4},
  {id: 9, text: 'Appenzell', country_id: 5},
  {id: 10, text: 'Zürich', country_id: 5},
];

$.mockjaxSettings.logging = 1;
$.mockjax({
  url: "/world/getCountries.php",
  contentType: "application/json",
  response: function(settings) {
    this.responseText = {
      results: countries.filter(item =>
        !settings.data.term || item.text.toLowerCase().includes(settings.data.term.toLowerCase())
      )
    };
  }
});
$.mockjax({
  url: "/world/getStates.php",
  contentType: "application/json",
  response: function(settings) {
    console.log(settings.data);
    this.responseText = {
      results: states.filter(item =>
        item.country_id == settings.data.country_id && (
          !settings.data.term || item.text.toLowerCase().includes(settings.data.term.toLowerCase())
        )
      )
    };
  }
});

select {
  width: 200px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.min.js"></script>

<select id="country"></select>
<select id="state"></select>

Answer 4

Once the change event is triggered for the country selection, the selected country is based on the localStorage value and the change is triggered successfully. However, when the change event is immediately triggered for the state selection right after that, it does not work as expected. What could be causing this issue?

The reason why triggering the change event for your #state list immediately after the country selection event fails is because at that moment, the state list is still empty. Consequently, there are no values to select, rendering the change event ineffective.

The recommended approach is to wait until the state list is populated with options before triggering the change event.

// To work immediately where countries are present in the HTML
$('#country').val("value from localStorage").trigger('change');

// For the state selection, trigger the change event within the success callback of the country Ajax request
$('#state').val("value from localStorage").trigger('change');

An alternative method involves creating a temporary option first:

$('#state').append("temporary <option> created from localStorage");
$('#state').val("value from localStorage").trigger('change');

This workaround eliminates the need to wait for the state list to populate before triggering the change event.

On another note, Select2 provides support for remote data retrieval, eliminating the manual handling of Ajax requests or option creation.

$("#country").select2({
  ajax: {
    url: "/world/getCountries.php"
  },
  placeholder: 'Pick a country',
  minimumInputLength: 1
}).change(function () {
  $("#state").val("").trigger("change");
});

$("#state").select2({
  ajax: {
    url: "/world/getStates.php",
    data: (params) => {
      // include selected country ID in URL parameters 
      params.country_id = $("#country").val();
      return params;
    }
  },
  placeholder: 'Pick a state',
  minimumInputLength: 1
});

// initialize selection using previous data...
$("#country").append('<option value="5">Switzerland</option>');
$("#country").val("5");
$("#state").append('<option value="9">Appenzell</option>');
$("#state").val("9");


// server side mock-up -------------------------------------------------
const countries = [
  {id: 1, text: 'Australia'},
  {id: 2, text: 'Denmark' },
  {id: 3, text: 'Japan'},
  {id: 4, text: 'Norway'},
  {id: 5, text: 'Switzerland'}
];
const states = [
  {id: 1, text: 'New South Wales', country_id: 1},
  {id: 2, text: 'Victoria', country_id: 1},
  {id: 3, text: 'Hovedstaden', country_id: 2},
  {id: 4, text: 'Midtjylland', country_id: 2},
  {id: 5, text: 'Hokkaido', country_id: 3},
  {id: 6, text: 'Shikoku', country_id: 3},
  {id: 7, text: 'Northern Norway', country_id: 4},
  {id: 8, text: 'Southern Norway', country_id: 4},
  {id: 9, text: 'Appenzell', country_id: 5},
  {id: 10, text: 'Zürich', country_id: 5},
];

$.mockjaxSettings.logging = 1;
$.mockjax({
  url: "/world/getCountries.php",
  contentType: "application/json",
  response: function(settings) {
    this.responseText = {
      results: countries.filter(item =>
        !settings.data.term || item.text.toLowerCase().includes(settings.data.term.toLowerCase())
      )
    };
  }
});
$.mockjax({
  url: "/world/getStates.php",
  contentType: "application/json",
  response: function(settings) {
    console.log(settings.data);
    this.responseText = {
      results: states.filter(item =>
        item.country_id == settings.data.country_id && (
          !settings.data.term || item.text.toLowerCase().includes(settings.data.term.toLowerCase())
        )
      )
    };
  }
});

select {
  width: 200px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.min.js"></script>

<select id="country"></select>
<select id="state"></select>

Efficient method for preserving dependent dropdown selections with Select2 and Ajax

Answer №1

Answer №2

Similar questions

Is it possible to define a shared function for enums in TypeScript?

Comparing values inputted from JavaScript using PHP

Modifying icons with JavaScript

Tips for eliminating default classes from Mui Typography styling

I need help figuring out how to use the post method in AJAX to send a username and password to a PHP file and then retrieve the fields. Can someone

Transforming an array of HTTP Observables into an Observable that can be piped asynchronously

Handling redirection on a single-page website without javascript functionality turned on

Storing information through an Ajax form in Laravel

Ensure that the React Material UI Textfield with the type "number" is validated to have exactly 10 characters

Can a modal be triggered using ajax?

Experimenting with TypeScript code using namespaces through jest (ts-jest) testing framework

Having Trouble Assigning Three JS Material to Mesh Object

How can I deactivate the main color of the FormLabel when the focus is on the radio button group?

Having issues with the basic KnockoutJS binding not functioning as expected

If the element is checked and equal to a specific value, take action

Could this be a limitation of Ajax live search, or is it a problem related to the server?

inject the HTML content into the <div> container

How can Socket.io prevent other pages from receiving all messages?

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

What is the definition of a type that has the potential to encompass any subtree within an object through recursive processes?