如何單擊下拉菜單並選擇選項？

Question

我有以下代碼

<select class="needsclick" id="country" name="order[country]">
              <option value="USA" selected="selected">USA</option>
              <option value="CANADA">CANADA</option>
            </select>

我可以執行以下javascript命令來更改選項值

document.getElementById("country").value = 'CANADA'

但是，這不會更改所選值，也不會將狀態框更改為省。

當我實際單擊此下拉菜單並更改為CANADA時，更改的效果就會發生（狀態框更改為Province）

我正在使用Swift iOS解析HTML，並想知道單擊選項值而不是更改選項值需要一行JavaScript代碼？

如果更改值后執行以下操作

document.getElementById("country").click()

它僅單擊菜單，但仍不會將狀態框更改為省（在物理上單擊選項值時發生）

如何使用上述兩個的javascript命令實現此目標？

狀態/省份框與代碼無關，只是與實際單擊下拉列表而不是通過編程更改而更改的事實相關。

我可以執行以下代碼，但是它仍然不會將狀態框更改為省（僅在物理單擊的情況下）

document.getElementById("country")[1].selected = true

Answer 1

要使用select內的option元素，必須訪問options節點列表，然后選擇一個要使用的元素。

設置值與設置selected標志是分開的。

 var countries = document.getElementById("country"); var states = document.getElementById("provincesUSA"); var territories = document.getElementById("provincesCanada"); countries.addEventListener("change", function(e) { update(e); }); function update(e){ // show the correct sub-list based on the selected option var country = countries[countries.selectedIndex]; if(country.value === "USA"){ states.classList.remove("hidden"); territories.classList.add("hidden"); } else if(country.value === "CANADA") { territories.classList.remove("hidden"); states.classList.add("hidden"); } else { territories.classList.add("hidden"); states.classList.add("hidden"); } } // To dynamically choose document.querySelector("button").addEventListener("click", function(){ countries.options[2].selected = "selected"; // Canada // Simulate the change event update(countries); }); 

 #provincesUSA.hidden, #provincesCanada.hidden { display:none; } 

 <select class="needsclick" id="country" name="order[country]"> <option value="" selected="selected">Choose A Country</option> <option value="USA">USA</option> <option value="CANADA">CANADA</option> </select> <select id="provincesUSA" class="hidden" name="states"> <option value="al">Alabama</option> <option value="ar">Arkansas</option> </select> <select id="provincesCanada" class="hidden" name="territories"> <option value="on">Ontario</option> <option value="qu">Quebec</option> </select> <button>Force A Selection (click me whe CANADA is NOT selected)</button> 

Answer 2

document.getElementById("country").selectedIndex = 2;