Question

我确信这（希望）会变成一个非常愚蠢的问题。

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

除其他外，我必须将select移动到用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文件中的值（在表单提交时调用），我可以检查那里的值。但是，我似乎找不到绑定该功能的任何地方。如果我在原始代码中按上述方式触发，则事件将触发，但所选值永远不会更改。如果我在同一个JavaScript文件中检查另一个函数中select的值，则该值不会改变。

反映更改的唯一地方是从其他 PHP文件中的函数调用时...但尝试绑定事件似乎不起作用。我开始有点疯狂......

修改：通过绑定JS1中的click事件来解决，该事件在JS2中调用函数返回值。在JS1中，我从来没有能够读取select的真正价值，因此永远不会绑定更改事件。

Answer 1

在JavaScript中为change事件添加事件监听器：

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

Fiddle example

Answer 2

首先将onclick事件更改为onchange。

然后，使用:selected

而不是使用$("#continent").val()来获取下拉值

Answer 3

所以，这是我能在合理的时间范围内提出的唯一解决方案，所以请原谅。

该文件的结构是[我没有写]： HTML（包括JS1） - ＆gt;使用加载PHP脚本（包括JS2）的iFrame加载HTML文件。

我可以在JS1中绑定一个onclick事件 - onchange永远不会工作，因为select属性永远不会改变。

所以，我在JS1中绑定了一个onclick，它调用了必需的函数，该函数在JS2中调用了一个返回$（＆＃39;＃continent＆＃39;）。val（）的函数。

在JS1中：

       ' <td class="ttcell itemcell1 continent">' +
   ' <select name="continent" id="continent" class="long-field" onclick="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>' +...


    function calcTotals()
{       
   var $f = $("#cartFrame");
   out = $f[0].contentWindow.returnVal(); ...

在JS2中：

function returnVal() {
return $('#continent').val();}

修改很久以来交付了这个项目，但我不时想一想我怀疑可能发生的是jQuery冲突（iirc他至少有2个不同版本的jQuery被导入到不同的文件中）。

选择元素“已选择”不变 - JavaScript

3 个答案: