如何使用相同的javascript控制表单中的不同元素

Question

I have more than one rows in my form. Basically two dropdown boxes in each row. Value of second dropdown box gets updated based on selection in the first drop down box. How do I apply javascript to individual rows at a time? Say when I change first dropdown box in second row, i want second dropdown to get updated only in the second row. Also, how do I use arrays in to update multiple rows data to the same database. Here is my code:

<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>

on selecting a supplier..i want to change the items in the itemname dropdown list..but i want the change to happen to respective dropdown lists only...how do i do this?

this is the javascript I am using

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

Have a look at knockout.js

It allows you to build a MVVM model in Javascript, and what you want can easy be achieved. On the site there are a lot of examples. And on Channel 9 there is a nice presentation of knockout.js from Steve Sanderson.

Answer 2

You may change the signature of updatesetup method.

Define two parameters, lets say mainindex and subindex, that must receive the index of each element from that row, something like:

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]);
        }
 }   

Note that I have changed the ids to be searched ... so, in yout html built th rows with an index sequence

<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>