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

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

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

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