Программный выбор параметра, не обновленного в браузере

Question

Я пытаюсь автоматически заполнить раскрывающийся список, особенно на этом веб-сайте . Обратите внимание, что когда пользователь вручную выбирает страну (скажем, Соединенное Королевство), поля меняются и отображается только почтовый индекс.

Однако я немного застрял в том, как этого добиться с помощью JavaScript:

let pageElement = document.getElementById('#checkout_shipping_address_country');
pageElement.focus();
pageElement.value = "United Kingdom";
pageElement.dispatchEvent(new Event('change'));
pageElement.blur();

Это только изменяет значение раскрывающегося списка, но почему-то не «отправляет» или не «щелкает» по нему, как если бы это делал вручную пользователь. Другими словами, поля State / PostCode не меняются динамически при выборе другой страны.

Я немного не понимаю, как действовать дальше.

Answer 1

Я создал скрипт, в котором я изменяю значение поля выбора через JS, затем запускаю и меняю событие. Затем на основе значений поля выбора добавление параметров к другому полю выбора.

https://jsfiddle.net/asutosh/18zs3ofd/20/

JS код:

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;
}
//Select USA option after 3 seconds of UI gets loaded
    setTimeOut(()=>{
    selectElement('checkout_shipping_address_country', 'usa');
    var changeEvent = new Event('change');
     document.querySelector("#checkout_shipping_address_country").dispatchEvent(changeEvent);
    },3000);