下拉菜单在选择另一个值时没有更新
Dropdown is not updating while selecting another value
Hello在我的表单中,我使用了java脚本on change事件它适用于我的文本框但不适用于我的下拉框,每当我从下拉框中选择其他
值必须更改,但它不起作用
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function add()
{
var ea = parseInt(document.TransactionForm.earnamount.value);
var td = parseInt(document.TransactionForm.taxdeduction.value);
var ap = parseInt(document.TransactionForm.amountpaid.value);
var arwo = parseInt(document.TransactionForm.amountremainwithoffice.value);
var result = (ea * td) / 100;
var result1 = ea-result;
var result2 = result1 - ap;
document.TransactionForm.amountpayable.value = result1 ;
document.TransactionForm.amountremainwithoffice.value = result2 ;
}
</script>
<title>Calculate</title>
</head>
<body>
<form action="#" name="TransactionForm" method="post">
Earn Amount:<br />
<input type="number" id="earnamount" name="earnamount" onChange="add()" ><br /><br />
Tax Deduction:<br />
<select name="taxdeduction" id="taxdeduction" onchange="add()">
<option value="2">Two Percent</option>
<option value="5">Five Percent</option>
</select>
<br /><br />
Amount Payable:<br />
<input type="number" id="amountpayable" name="amountpayable" ><br /><br />
Amount Paid:<br />
<input type="number" id="amountpaid" name="amountpaid" onchange="add()" ><br /><br />
Amount Remain With Office:<br />
<input type="number" id="amountremainwithoffice" name="amountremainwithoffice" ><br /><br />
<input type="submit" value="Submit To Database" />
</form>
</body>
</html>
这里使用的函数名add()与HTMLSelectElement add方法-冲突在这里看到的。你的代码生成了一个javascript错误,上面写着——
TypeError: Not enough arguments to HTMLSelectElement.add.
我没有关于这个错误的详细信息。
将方法名称更改为其他名称将有效。参见这个jsfiddle示例
把你的方法名改成别的。如。修改add()为addThis()
你可以这样做
小提琴:小提琴
<select id="taxdeduction" onchange="myfun()">
<option value="2">Two Percent</option>
<option value="5">Five Percent</option>
</select>
应该可以正常工作,看看这里:http://jsfiddle.net/jpkhw/
<script type="text/javascript">
function populateList() {
alert("Test");
}
</script>
<select onchange="populateList();">
<option>1</option>
<option>2</option>
</select>
或者在这里:select onclick onchange not working
总是使用javascript注册你的处理程序,避免内联事件处理,使用JS注册你的事件处理程序解决它:-
window.onload =function (){
var p1 = document.getElementById("taxdeduction");
if (p1.addEventListener) {
pl.addEventListener("change", add, false);
} else {
pl.attachEvent('onchange', add);
}
};
这是你的工作代码- fiddle
来源参考
相关文章:
- JavaScript:更新<选择>给定月份输入的天数列表
- 如何动态更新选择值
- 由其他Ember Select填充的Ember Select不更新选择绑定
- Meteor AutoForm:如何基于其他控件更新选择选项
- 在更新选择器中使用$in时颠倒多个文档
- 使用jQuery更新选择的多个字段的数量
- 使用js使html按钮更新选择标记onchange函数
- 如何使用jQuery更新选择选项下拉菜单
- 根据滚动位置更新选择菜单中的选定选项
- 代码镜像 - 更新选择
- 尝试从 jQuery 帖子结果更新选择列表选项
- 从 jquery ajax json 响应更新“选择”框中的选项值
- 使用 SQL 信息更新选择下拉列表 (HTML)
- 使用 jQuery 或 Javascript 自动更新选择选项列表
- 在更改另一个选择输入时更新选择输入
- 在 Meteor 中使用复杂的更新选择器进行原子操作
- AngularJS如何使用ng选项更新选择框中的嵌套模型
- D3 将更新选择限制为具有实际更改的条目
- jQuery Chosen-在不丢失选择的情况下更新选择列表
- 根据另一个选择更新选择菜单