javascript - 选择元素 "selected"未更改 - JavaScript

Question

我确信(希望)这是一个非常愚蠢的问题。

我正在对客户网站的表单进行一些基本更改 - 显然，该网站在 iFrame 中加载了一个 php 脚本，该脚本写入了表单的 2/3。在 php 脚本结束后，表单的其余部分将写入包含在原始页面上的 JS 文件中。

除其他事项外，我必须将一个选择移动到用 JavaScript 编写的页面部分。

'   <td class="ttcell itemcell1 continent">' +
'   <select name="continent" id="continent" class="long-field" onchange="window.parent.calcTotals()">' +
'   <option value="NA">North America</option>' +
'   <option value="SA" selected>South America</option>' +
'   <option value="EU">Europe</option>' +
'   <option value="MO">Middle-Orient</option>' +
'   <option value="AA">Asia-Australia</option>' +
'   </select>' + 
'   </td>' +

当下拉选择发生变化时，我需要计算一个显示值。如果我检查 PHP 文档中包含的 JavaScript 文件中的值(在表单提交时调用)，我可以检查那里的值。 但是，我似乎找不到任何地方来绑定(bind)该功能。 如果我在原始代码中有如上所述的 onclick，事件会触发，但所选值永远不会改变。 如果我在同一个 JavaScript 文件的另一个函数中检查 select 的值，该值不会改变。

唯一反射(reflect)更改的地方是从 other PHP 文件中的函数调用时...但是尝试绑定(bind)那里的事件似乎不起作用。我开始有点疯狂了......

编辑: 通过在 JS1 中绑定(bind)一个单击事件来解决，该事件在 JS2 中调用一个函数返回值。 在 JS1 中，我永远无法读取 select 的真实值，因此永远无法绑定(bind)更改事件。

Answer 1

在您的 JavaScript 中为 change 事件添加一个事件监听器:

document.querySelector('#continent').addEventListener('change', function(e) {
    alert(e.target.value);
});

Fiddle example