使用 JavaScript 选择下拉菜单选项

Question

我有一个下拉菜单，但我不知道如何让 JavaScript 函数选择下拉菜单选项。我已经测试了变量的输出，它们都是正确的，但单击时仍然不会选择该选项。这是功能和下拉菜单。

功能

function formFill(a, b, c){
        theform.from.value = a;
        theform.to.value = b;
        for(var i = 0;i < document.getElementById("stateSelect").length;i++){
            if(document.getElementById("stateSelect").options[i].value == c ){
                document.getElementById("stateSelect").selected = true;
            }
        }
    }

菜单项

<select id="stateSelect" name="stateSelect">
    <option value="none">(None)</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>

Answer 1

将以下行：

document.getElementById("stateSelect").selected = true;

更改为：

document.getElementById("stateSelect").selectedIndex = i;

Answer 2

替代。您可以将 selected 设置为实际选项： select.options[i].selected = true;

...
        var select = document.getElementById("stateSelect");
        for(var i = 0;i < select.options.length;i++){
            if(select.options[i].value == c ){
                select.options[i].selected = true;
            }
        }
...

Answer 3

例如，使用 Stimulus，我们获取用户的时区，然后在下拉列表中自动选择它

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input"]

  connect() {
    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

    [...this.inputTarget.options].forEach((option) => {
      if (option.value == timeZone) {
        option.selected = true
      }
    })
  }
}