Question

I have a requirement of changing all dropdown values in all the rows in a tale based on master dropdown. say someone selects “value 2” in dropdown1, dropdown2 values in all the rows in the table should show “value2”.

    function change(){

var cid = document.frm.locdropdown.selectedIndex;

document.frm.locdropdown2.selectedIndex = cid;


}

is the java script I use to change it but this changes only first row.

please help..

Answer 1

From your example code it looks like you’ve given the same ID to all your locdropdown2 elements? Maybe you should post an example of your table HTML. It’s normal practice to give unique IDs to elements, so you may want to test the NAME attribute instead, but anyway something like the following should work:

function change() {
   var cid = document.frm.locdropdown.selectedIndex;
   var inputs = document.getElementsByTagName("input");
   for (var i=0, l = inputs.length; i < l; i++) {
      if (inputs[i].id == "locdropdown2")
         inputs[i].selectedIndex = cid;
   }
}

Another option is to loop through each row in the table. The following example assumes your locdropdown2 inputs are the only thing in the third column, but you can adapt to suit your actual layout:

function change() {
   var cid = document.frm.locdropdown.selectedIndex;

   var tableRows = document.getElementById("yourTableId").tBodies[0].rows;
   for (var i=0, l=tableRows.length; i < l; i++) {
      tableRows[i].cells[2].firstChild.selectedIndex = cid;
   }
}

Note: I haven’t actually tested any of that code, but it should be more than enough to get you started and you can tweak as needed. (You can use Google to learn about tBodies, rows, cells, firstChild, etc.)