dom events - 有没有办法通过脚本调用表单外部的元素来调用 JavaScript 函数

Question

当在表单上选择一个值时，我正在尝试调用一个简单的函数。问题是我无法访问可以直接在字段上设置函数的代码。

如果我有访问权限，我只需直接在 <Select> 元素中编写onChange事件。有没有办法在脚本中调用<Select>元素并在那里应用 onChange 事件？

这是我目前的脚本。我正在尝试从单独的<Select>字段中获取两个值，并将其总和应用于另一个字段。

<script type="text/javascript">
 function changeQty ()
{
    var productName = MainForm.elements["ProductCode"].value;
    var Quantity1 = MainForm.elements["SELECT___"+productName+"___23"].value;
    var Quantity2 = MainForm.elements["SELECT___"+productName+"___24"].value;
    
    var QtyUpdated = Quantity1 + Quantity2;
    
    MainForm.elements["QTY."+productName].value = QtyUpdated;
    
}
</script>

这是我希望函数触发的表单元素。我只能访问可以插入脚本的标题，但不能访问页面上的元素。表单也已经有一些其他的JavaScript。我可以有两个onChange活动吗？

<SELECT name="SELECT___1-DAY-ACUVUE___21" onChange="change_option('SELECT___1-DAY-ACUVUE___21',this.options[this.selectedIndex].value)">
<OPTION value="192" >-12.00</OPTION>
<OPTION value="193" >-11.50</OPTION>
<OPTION value="73" >-11.00</OPTION>
<OPTION value="79" >-10.50</OPTION>
<OPTION value="80" >-10.00</OPTION>
<OPTION value="81" >-9.50</OPTION>
<OPTION value="82" >-9.00</OPTION>
<OPTION value="83" >-8.50</OPTION>
<OPTION value="84" >-8.00</OPTION>
<OPTION value="85" >-7.50</OPTION>
<OPTION value="86" >-7.00</OPTION>
<OPTION value="87" >-6.50</OPTION>
<OPTION value="88" >-6.00</OPTION>
<OPTION value="89" >-5.75</OPTION>
<OPTION value="90" >-5.50</OPTION>
<OPTION value="91" >-5.25</OPTION>
<OPTION value="92" >-5.00</OPTION>
<OPTION value="93" >-4.75</OPTION>
<OPTION value="94" >-4.50</OPTION>
<OPTION value="95" >-4.25</OPTION>
<OPTION value="96" >-4.00</OPTION>
<OPTION value="97" >-3.75</OPTION>
<OPTION value="98" >-3.50</OPTION>
<OPTION value="99" >-3.25</OPTION>
<OPTION value="100" >-3.00</OPTION>
<OPTION value="101" >-2.75</OPTION>
<OPTION value="102" >-2.50</OPTION>
<OPTION value="103" >-2.25</OPTION>
<OPTION value="104" >-2.00</OPTION>
<OPTION value="105" >-1.75</OPTION>
<OPTION value="106" >-1.50</OPTION>
<OPTION value="107" >-1.25</OPTION>
<OPTION value="108" >-1.00</OPTION>
<OPTION value="109" >-0.75</OPTION>
<OPTION value="110" >-0.50</OPTION>
<OPTION value="112" >+0.50</OPTION>
<OPTION value="113" >+0.75</OPTION>
<OPTION value="114" >+1.00</OPTION>
<OPTION value="115" >+1.25</OPTION>
<OPTION value="116" >+1.50</OPTION>
<OPTION value="117" >+1.75</OPTION>
<OPTION value="118" >+2.00</OPTION>
<OPTION value="119" >+2.25</OPTION>
<OPTION value="120" >+2.50</OPTION>
<OPTION value="121" >+2.75</OPTION>
<OPTION value="122" >+3.00</OPTION>
<OPTION value="123" >+3.25</OPTION>
<OPTION value="124" >+3.50</OPTION>
<OPTION value="125" >+3.75</OPTION>
<OPTION value="126" >+4.00</OPTION>
<OPTION value="127" >+4.25</OPTION>
<OPTION value="128" >+4.50</OPTION>
<OPTION value="129" >+4.75</OPTION>
<OPTION value="130" >+5.00</OPTION>
<OPTION value="131" >+5.25</OPTION>
<OPTION value="132" >+5.50</OPTION>
<OPTION value="133" >+5.75</OPTION>
<OPTION value="134" >+6.00</OPTION>
</SELECT>&nbsp;&nbsp;

Answer 1

您感兴趣的元素是否设置了 id 或名称字段。我昨天为我网站上的表格解决了这个问题。您可以使用jquery轻松完成此操作。

添加以下内容：

$(document).ready(function(){
  $("#id_cities_0").change(function(){
    //call your function here
  }); 
})

将id_cities_0替换为可以通过查看源代码找到的元素的 id。但是，请确保 id 不会更改。

如果元素没有 id，请写回。

Answer 2

这很容易做到，没有其他库依赖项。 首先您的问题...

问：我可以有两个 onChange 事件吗？
答：是的，如果您注册了addEventListener/attachEvent，请参阅事件上的quirksmode入门。 您可以有任何类型的>1事件。

要在加载事件后将事件附加到页面上的某些内容，请执行以下操作：

if (window.addEventListener) {
    window.addEventListener('load',prep,false);
} else if (window.attachEvent) {
    window.attachEvent('onload',prep);
}

其中prep是一个函数，它将changeQty函数附加到页面中所需的任何元素：

function prep() {
    /* Assuming your MainForm.elements process gets an element*/
    var el=MainForm.elements["SELECT___"+productName+"___23"];
    if (el.addEventListener) {
        el.addEventListener('change',changeQty,false);
    } else if (el.attachEvent) {
        el.attachEvent('onchange',changeQty);
    }
}

onload/load将等到整个DOM加载完毕，即scripts/css/HTML和图形。 只是一个警告 - 如果页面加载很复杂，它可能无法在页面呈现后立即工作。 如果您可以控制 HTML 末尾的内容（在 </html> 之前），那么您可以通过以下内容解决此问题（而不是将prep附加到load并定义prep函数）：

<script>
(function() { 
    /* Assuming your MainForm.elements process gets an element*/
    var el=MainForm.elements["SELECT___"+productName+"___23"];
    if (el.addEventListener) {
        el.addEventListener('change',changeQty,false);
    } else if (el.attachEvent) {
        el.attachEvent('onchange',changeQty);
    }
}());
</script>
</body>
</html>