Javascript 以编程方式选择浏览器中未更新的选项

我正在尝试自动填充下拉选择器，特别是在。请注意，当用户手动选择一个国家（例如英国）时，字段会更改，并且只显示邮政编码

但是，我对如何通过JavaScript实现这一点有点困惑：

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

这只会更改下拉列表的值，但不会像手动用户那样提交或单击它。换句话说，当选择其他国家/地区时，州/邮政编码字段不会动态更改

---

我对如何继续有点困惑。

我创建了一个提琴，通过JS更改selectbox的值，然后触发和onchange事件。然后根据选择框的值将选项附加到另一个选择框

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);

---

这是否有助于您不应将field.value设置为pageElement.value？如果不是，字段是什么？它来自哪里？@weltschmerz是的，对不起，复制+粘贴错误。更新：@Asutosh否，问题是如果这样做，后续的输入/选择节点不会动态更改。答案有什么问题？