How to control different elements in the form using same javascript
<p>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:</p>

<pre><code>&lt;form action='purchase.php' method="POST"&gt; 
&lt;table&gt;&lt;tr&gt;&lt;td&gt;Supplier&lt;/td&gt;&lt;td&gt;Item Name&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;select name ="supplier" id = "supplier" onchange = "updatesup()"&gt;
&lt;option value = "1"&gt; SUPA &lt;/option&gt;&lt;option value = '2'&gt;SUPB&lt;/option&gt;&lt;/select&gt; &lt;/td&gt;
&lt;td&gt; &lt;Select name ="itemname" id="itemname"&gt;&lt;option value = ""&gt; Select Item&lt;/option&gt;&lt;/select&gt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;select name ="supplier" id = "supplier" onchange = "updatesup()"&gt;
&lt;option value = "1"&gt; SUPA &lt;/option&gt;&lt;option value = '2'&gt;SUPB&lt;/option&gt;&lt;/select&gt; &lt;/td&gt;
&lt;td&gt; &lt;Select name ="itemname" id="itemname"&gt;&lt;option value = ""&gt; Select Item&lt;/option&gt;&lt;/select&gt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/form&gt;
</code></pre>

<p>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?</p>

<p>this is the javascript I am using</p>

<pre><code>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 &lt;= 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&gt;=0;j--)
{
    selectbox.remove(j);
}
   }      
</code></pre>
