How do you filter the list of states when country is selected? [closed]

Question

Here is some generic js you could use to accomplish this.

This code is intentionally generic, so you will need to make it work for your scenario. You can load up your various states and hide them with the ‘js-display-toggle’ class. When the appropriate country is chosen from ‘base’ select menu, then you remove the toggle class and show those state.

(function(d, undefined) {
  'use strict';
  var display = 'js-display-toggle',
    elems = d.getElementsByClassName('items');

  function addToAll() {
    Array.prototype.slice.call(elems, 0).forEach(function(el, i) {
      el.classList.add('js-display-toggle');
      console.log('add');
    });
  }

  function delegator(event) {
    switch (event.type) {
      case 'change':
        if (event.target.id === 'base') {
          addToAll();
          switch (event.target.options.selectedIndex) {
            case 1:
              console.log('1');
              d.getElementById('seleks').classList.remove(display);
              break;
            case 2:
              console.log('2');
              d.getElementById('selectionField').classList.remove(display);
              break;
            case 3:
              console.log('3');
              d.getElementById('cars').classList.remove(display);
              break;
            default:
          }
        }
        break;
    }
  }
  d.addEventListener('change', delegator, false);
}(document, undefined));

.js-display-toggle {
  display: none !important;
  visibility: hidden !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>How do you filter the list of states when country is selected?</title>
</head>

<body>
  <form id="my-form">
    <select id="base">
      <option value="0">select one</option>
      <option value="1">first</option>
      <option value="2">second</option>
      <option value="3">third</option>
    </select>
    <select id="seleks" class="js-display-toggle items">
      <option value="value1">Value 1</option>
      <option value="value2">Value 2</option>
      <option value="value3">Value 3</option>
    </select>
    <select id="selectionField" class="js-display-toggle items">
      <option value="CA">California -- CA</option>
      <option value="CO">Colorado -- CO</option>
      <option value="CN">Connecticut -- CN</option>
    </select>
    <select id="cars" class="js-display-toggle items">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </form>
</body>

</html>

Related Posts: