JSFiddle - React, Tailwind, and code Playground

by asutosh

HTML

<select id="checkout_shipping_address_country">
  <option value="uk">United Kingdom</option>
  <option value="usa">USA</option>
</select>
<select id="states">

</select>

JavaScript

document.querySelector("#checkout_shipping_address_country").addEventListener('change', function() {
  console.log(this.value);
  fillStates(this.value);

});
function fillStates(aCountryId) {
  const stateSelectbox = document.querySelector("#states");
  let optionsVal = [];
  switch (aCountryId) {
    case 'usa':
      optionsVal = ['phili', 'newyork'];
      break;
    case 'uk':
      optionsVal = ['london', 'britain'];
      break;
    default:
      break;
  }
  console.log(optionsVal);

  const optionsArray = optionsVal.map((optVal) => "<option value=" + optVal + ">" + optVal + "</option>");
  stateSelectbox.innerHTML = '';
  stateSelectbox.innerHTML = optionsArray.toString();
}

function selectElement(id, valueToSelect) {
  let element = document.getElementById(id);
  element.value = valueToSelect;
}
selectElement('checkout_shipping_address_country', 'usa');
var changeEvent = new Event('change');

document.querySelector("#checkout_shipping_address_country").dispatchEvent(changeEvent);