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'

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

当我实际点击此下拉菜单并更改为加拿大时，会发生更改的影响（状态框更改为省）

我正在使用Swift iOS解析HTML并想知道点击选项值而不是更改选项值需要哪些javascript代码？

如果我在更改值

后执行以下操作

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

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

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

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

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

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

Answer 1

要使用option中的select元素，您必须访问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;

如何点击下拉菜单并选择选项？

2 个答案: