JavaScript在加载到div后更改HTML代码

我有一个从数据库获取值的页面，我无法控制值/如何调用它们，但最终结果看起来像标准HTML代码，例如：

<div id="myDiv" class="controls">
    <select id="jform_province" name="jform[province]">
        <option value="AB">Alberta</option>
        <option value="BC">British Columbia</option>
        <option value="MB">Manitoba</option>
    </select>
</div>

阿尔伯塔省
不列颠哥伦比亚省
马尼托巴省

我希望在页面末尾添加一个脚本，可以通过添加一个函数来修改选项元素，如下所示：

<option value="AB" onClick="someFunction()">Alberta</option>

阿尔伯塔省

如何修改代码？我知道如何编辑div的整个内容，但我想更改元素，我不知道元素的值是什么，因此脚本需要在“myDiv”中找到所有选项标记（我在页面上有其他列表，我不想更改），并将代码添加到所有选项标记中

---

谢谢

只需附加一个事件处理程序：

document.getElementById('jform_province').onchange = function() {
  switch(this.options[this.selectedIndex].value) {
    case "AB": someFunction(); break;
    // define other cases as needed
  }
};

---

请注意，

元素在选中时不会触发

onclick

事件，即使它们触发了，也不会检测其他输入方法，例如使用键盘。上面的代码提供了另一种选择。

列表在单击时有效，但在按键时无效，因此您是对的，但问题是我并不总是知道选项将是什么，在其他情况下，这是不可行的（有数百个选项），没有办法自动执行吗？如果无论选择哪个选项，我都希望函数是相同的，那么我如何编写该函数呢？就像case（all）一样，不要将

开关放在那里，只需调用函数即可。谢谢，这非常有效，唯一的问题是我需要从下拉列表中选择tab来更新，但这没关系。