如何在jsp addrow()里面实现联动下拉?

Question

在JSP页面通过addrow()可以添加多条相同数据结构的记录,第一个单元格数据是从数据库获得,通过选择这个单元格数据,后面的单元格数据自动弹出,如何实现?

             <table  id="mytabletool"  class="MyTableStyle"> 
               <thead>
                <tr id="row1" align="center" valign="middle">
                   <td style="width:6%;border-left: 1px solid #333;border-right: 1px solid #333;">序號</td>
                   <td style="width:10%;border-left: 1px solid #333;border-right: 1px solid #333;">名稱</td> 
                   <td style="width:10%;border-left: 1px solid #333;border-right: 1px solid #333;">數量</td>
                   <td style="width:10%;border-left: 1px solid #333;border-right: 1px solid #333;">規格</td>            
               </tr> 
              </thead>
               <s:iterator value="toolinfo"  status="stauts">
                  <tr align="center" valign="middle">
                       <td style="border-left: 1px solid #333;border-right: 1px solid #333;border-top: 1px solid #333;border-bottom: 1px solid #333;">${stauts.index+1}</td>
                       <td style="border-left: 1px solid #333;border-right: 1px solid #333;border-top: 1px solid #333;border-bottom: 1px solid #333;">
                            <select name="toolname" id="toolname"  onchange="changeToolName(this);"></select>
                       </td>
                       <td style="border-left: 1px solid #333;border-right: 1px solid #333;border-top: 1px solid #333;border-bottom: 1px solid #333;"><input type="text" style="width:50;"  name="tquantity" value="${tquantity}"/></td>
                       <td style="border-left: 1px solid #333;border-right: 1px solid #333;border-top: 1px solid #333;border-bottom: 1px solid #333;">
                             <select name="spec" id="spec"></select>
                       </td>
                  </tr>
               </s:iterator>             
             </table >   
              <input name="b3" type="button" value="add one row" onclick="javascript:addRowTool();"/>
              <input name="b4" type="button" value="delete one row" onclick="javascript:delRowTool();"/><br /> 

function changeToolName(ob){

    var toolname = ob.value;
     $.ajax({
            url:'toolAction_getToolSpecList',
            type:'post',    
            data:{toolname:toolname},
            dateType:'json',
            error: function(){alert('Error');},
            success: function(data)
             {
                var obj = eval("("+data+")");
                var str="<option value='' >--select--</option>";
                //var obj = data;
                for(var key in obj)
                 {                

                     str +="<option>"+obj[key]+"</option>";
                 }
                 $("#spec").html(str);
             }
     });

}

function addRowTool() { //增加一行
var tableObj = document.getElementById('mytabletool');
var rowNums = tableObj.rows.length;
var newRow = tableObj.insertRow(rowNums);

   var col0 = newRow.insertCell(0); 

       col0.align = "center"; 
       col0.style.borderTop="1px solid #333";
       col0.style.borderBottom="1px solid #333";
       col0.style.borderLeft="1px solid #333";
       col0.style.borderRight="1px solid #333";
       col0.style.width="6%";
       col0.innerHTML=rowNums;

   var col1 = newRow.insertCell(1); 

       col1.align = "center"; 
       col1.style.borderTop="1px solid #333";
       col1.style.borderBottom="1px solid #333";
       col1.style.borderLeft="1px solid #333";
       col1.style.borderRight="1px solid #333";
       col1.style.width="10%";

        select=document.createElement("select");
        select.name="toolname";
       select.id="toolname";

        $.ajax({
            url:'toolAction_getToolNameList',
            type:'post',    
            data:{},
            dateType:'json',
            error: function(){alert('Error');},
            success: function(data)
             {
                var Data = eval("("+data+")");
                var str="<option value='' >--select--</option>";
                //var Data= data;
                var item;
                for(var key in Data)
                 {                
                     str +="<option>"+Data[key]+"</option>";
                     alert(str);
                     item=new Option(Data[key],data[key]);
                     select.add(item);

                 }
             }
     });

       col1.appendChild(select);    

   var col2 = newRow.insertCell(2); 

       col2.align = "center";
       col2.style.borderTop="1px solid #333";
       col2.style.borderBottom="1px solid #333";
       col2.style.borderLeft="1px solid #333";
       col2.style.borderRight="1px solid #333";
       col2.style.width="10%";

   var input2=document.createElement("input");
       input2.type="text";
       input2.name="tquantity";
       input2.id="tquantity";
       input2.style.width=90;
       col2.appendChild(input2);


  var col3 = newRow.insertCell(3); 
       col3.align = "center";
       col3.style.borderTop="1px solid #333";
       col3.style.borderBottom="1px solid #333";
       col3.style.borderLeft="1px solid #333";
       col3.style.borderRight="1px solid #333";
       col3.style.width="10%";
    select=document.createElement("select");
        select.name="spec";
       select.id="spec";
       col3.appendChild(select);

      }

只能获得名称,名称选择后无法触发onchange方法