如何点击下拉菜单并选择选项？ [英] How to click a dropdown menu and select option?

问题描述

我有以下代码

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

我可以执行以下javascript命令来更改选项值

I could do the following javascript command to change the option value

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

但是，这不会更改所选值，也不会将状态框更改为省。

however, this does not change the selected value and does not change the state box to province.

当我实际点击此下拉菜单时改为CANADA，发生变化的影响（状态框变为省）

When I physically click this dropdown menu and change to CANADA, the effects of the change take place (the state box changes to province)

我正在使用Swift iOS来解析HTML并想知道javascript代码是什么行需要单击选项值而不是更改选项值吗？

I am using Swift iOS to parse HTML and wondering what line of javascript code is needed to click a option value rather than changing the option value?

如果我在更改值后执行以下操作

If I do the following after changing the value

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

<它只是单击菜单但仍然没有将状态框更改为省（在物理点击选项值时发生）

it just clicks the menu but still does not change the state box to province (happens when physically clicking the option value)

如何使用javascript实现此目的像上面这两个命令？

How can I achieve this using a javascript command like the two above?

状态/省框与与物理点击下拉菜单时更改的事实相关的代码无关，而不是以编程方式更改时。

The state/province box is irrelevant to the code just relevant to the fact it changes when the dropdown is physically clicked and not when programmatically changed.

我可以执行以下代码，但它仍然不会将状态框更改为省（仅在物理上单击时）

I can do the following code but it still does not change the state box to province (only if physically clicked)

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

推荐答案

使用中的选项元素选择，您必须访问选项节点列表，然后选择要使用的节点列表。

To work with the option elements within a select, you must access the options node list and then select one to work with.

设置值是分开的设置选择标志。

Setting the value is separate from setting the selected flag.

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>

这篇关于如何点击下拉菜单并选择选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！