Question

我的表单中有多行。每行基本上有两个下拉框。第二个下拉框的值根据第一个下拉框中的选择进行更新。如何一次将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>

选择供应商..我想更改项目名称下拉列表中的项目..但我希望更改只发生在相应的下拉列表中...我该怎么做？

这是我正在使用的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);
}
   }

Answer 1

查看knockout.js

它允许您在Javascript中构建MVVM模型，并且您可以轻松实现所需的功能。在网站上有很多例子。在Channel 9上，Steve Sanderson对knockout.js进行了很好的演示。

Answer 2

您可以更改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 ...因此，在您构建的带有索引序列的行中

<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控制表单中的不同元素

2 个答案: