如何使用相同的javascript控制表单中的不同元素
How to control different elements in the form using same javascript
我的表单中有不止一行。基本上每行有两个下拉框。第二个下拉框的值将根据第一个下拉框中的选择进行更新。如何一次将javascript应用于单个行?假设当我更改第二行的第一个下拉框时,我希望第二个下拉框只在第二行更新。此外,我如何使用中的数组将多行数据更新到同一数据库中。这是我的代码:
<form action='purchase.php' method="POST">
<table><tr><td>Supplier</td><td>Item Name</td></tr>
<tr><td><select name ="supplier" id = "supplier" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname" id="itemname"><option value = ""> Select Item</option></select>/td></tr>
<tr><td><select name ="supplier" id = "supplier" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname" id="itemname"><option value = ""> Select Item</option></select>/td></tr></table></form>
关于选择供应商。。我想更改itemname下拉列表中的项目。。但我只想更改各自的下拉列表。。。我该怎么做?
这是我使用的javascript
array iteam_a;
item_a[0] = [1, item1, 1];
item_a[1] = [2, item2, 1];
item_a[2] = [3, item2, 1];
item_a[3] = [4, item4, 2];
item_a[4] = [5, item5, 2];
item_a[5] = [6, item6, 2];
function updatesup(){
removeAllOptions(document.getElementById('itemname'));
addOption(document.getElementById('itemname'), "", "Select Item");
for (var i = 0; i <= item_a.length-1; i++){
if (item_a[i][2] === document.getElementById('supplier').value){
addOption(document.getElementById('itemname'), item_a[i][0], item_a[i][1]);
}
}
}
function addOption(selectbox, value, text ){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
function removeAllOptions(selectbox)
{
var j;
for(j=selectbox.options.length-1;j>=0;j--)
{
selectbox.remove(j);
}
}
看看knockout.js
它允许您用Javascript构建MVVM模型,并且您想要的东西可以很容易地实现。网站上有很多例子。在第九频道,史蒂夫·桑德森(Steve Sanderson)精彩地展示了knockout.js。
您可以更改updatesetup方法的签名。
定义两个参数,比如mainindex和subindex,它们必须从该行接收每个元素的索引,类似于:
function updatesup(mainindex, subindex){
removeAllOptions(document.getElementById('itemname_' + subindex));
addOption(document.getElementById('itemname_' + subindex), "", "Select Item");
for (var i = 0; i <= item_a.length-1; i++){
if (item_a[i][2] === document.getElementById('suplier_' + subindex).value){
addOption(document.getElementById('itemname_' + subindex), item_a[i][0], item_a[i][1]);
}
}
注意,我已经更改了要搜索的ID。。。因此,在yout-html中,使用索引序列构建了第th行
<form action='purchase.php' method="POST">
<table><tr><td>Supplier</td><td>Item Name</td></tr>
<tr><td><select name ="supplier_0" id = "supplier_0" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname_0" id="itemname_0"><option value = ""> Select Item</option> </select>/td></tr>
<tr><td><select name ="supplier_1" id = "supplier_1" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname_1" id="itemname_1"><option value = ""> Select Item</option> </select>/td></tr></table></form>
相关文章:
- Javascript更新孙窗口中的表单元素
- 阻止表单元素提交
- 根据select选项元素将表单重定向到不同的URL
- 使用javascript取消隐藏和隐藏表单中的某些元素
- 使用带有.net autopostback的ryanfait.com自定义表单元素
- 使用javascript更改表单元素的ID值
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 表单中元素的更改值为't已发布
- Small Javascript从动态表单中删除多个元素的问题
- 为什么表单元素不应命名为submit
- 如何使用相同的javascript控制表单中的不同元素
- 从函数中选择要触发表单提交的正确元素
- 如何重置搜索表单中的特定表单元素
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- 使用 ng-repeat访问 ng 表单元素/值
- 获取电子邮件附件的表单元素
- js 语法传递名称元素表单验证
- 如何选择元素表单列表并将其放入文本框中
- 如何使用JQuery获取主体中第一个元素(表单)的id
- 尝试使用每个查找元素表单XML文件