我有一个名为“向导”的表单。每次更改任何输入元素时,我都希望有一个 Javascript 函数来运行并计算一些内容。我有以下内容:
// update hidden field "channels" in wizard based on servers/cores
$('form#wizard select[name=servers], form#wizard select[name=cores]').change(function() {
var channels = parseInt($('form#wizard select[name=servers]').val()) * parseInt($('form#wizard select[name=cores]').val());
$('#yellow').val(channels);
$('#yellow').change();
alert(channels);
});
上面的内容是:
$(document).ready(function() {
上面的内容似乎没有达到我想要的效果。我是否必须特别让每个输入字段都具有 onchnage 操作?
谢谢大家
编辑
抱歉,我的意思是选择元素。
<form id="wizard">
Number of server(s) you are thinking of purchasing licenses for:
<select style="margin-left: 10px; font-size:15px; padding:1px;" name="servers" id="servers"><option value="1" selected="">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option></select>
server(s) <br/><br/> Each server will have: <select style="font-size:15px; padding:1px;" name="cores" id="cores"><option style="margin-left: 10px;" value="115">a single core CPU</option><option value="230" selected="">a dual core CPU</option><option value="500">a quad core CPU</option><option value="960">an octo core CPU</option></select><br/><br/> And will be running: <select style="margin-left: 10px; font-size:15px; padding:1px; margin-right: 10px;" name="app" id="app"><option value="Asterisk" selected="">Asterisk®</option><option value="FreeSWITCH">FreeSWITCH</option></select> On
<select style="margin-left: 10px; font-size:15px; padding:1px;" name="cores" id="cores"><option value="Linux">Linux</option><option value="Solaris 10">Solaris 10</option><option value="OpenSolaris">OpenSolaris</option></select>
<br /><br />
</form>
编辑2
如果这个表单位于隐藏的div中,会有问题吗?我在这里捕获救命稻草,我不知道如何解决这个问题!
当我从 display:none 中删除时,由于某种原因它起作用了!顺便说一句,我将其与 fancybox jquery 插件一起使用。
最佳答案
什么是“#yellow”?
$('form#wizard select').change(function() {
var channels = (parseInt($('form#wizard select[name=servers]').val(), 10) *
parseInt($('form#wizard select[name=cores]:first').val(), 10));
$('#yellow').val(channels);
$('#yellow').change();
alert(channels);
});
您有两个带有核心名称和 ID 的选择,这可能是问题所在。我将 10 添加到了 parseInt 中,因为这通常是人们想要的,而没有它,parseInt 会做一些奇怪的事情。 “#yellow”是否也附加了更改事件?如果不是,您不需要触发更改,即使如此,设置其值应该会引发更改事件。
关于javascript - 对输入元素的每次更改运行函数 : JQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1549382/