Question

我有一个从数据库获取值的页面，我无法控制值/它们的调用方式，但最终结果看起来像标准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”中找到所有选项标签（我有其他列表在页面我不想更改）并将该代码添加到所有这些代码中。

由于

Answer 1

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

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

请注意，<option>元素在选中时不会触发onclick个事件，即使它们这样做也不会检测其他输入方法，例如使用键盘。上面的代码提供了另一种选择。

在div中加载后，JavaScript更改HTML代码

1 个答案: