请问如何实现在下拉框里选择某项后，与它相关的所有数据就自动填充到文本框里？

Question

比如表单中有一个表格，表格里有几栏需要用户填写的文本框，然后提交填写信息给cgi，表格里有下拉框可以选择操作对象，现在希望用户在下拉框里选择好对象后，与该对象相关的旧数据就立刻显示在对应的文本框中。另外，这些旧数据在本网页上是已有的，只是想在用户选择操作对象后，再实时显示一下，这样方便用户操作。
请问这样的功能该怎么实现？谢谢

Answer 1

旧数据是显示在页面上另外一个表格里的。旧数据所在的表格 和 需要用户填写提交的表格 每一项内容是一一对应的。//旧数据所在表格
<table width="80%" class="field" border="0" cellspacing="1" cellpadding="4" align="center" >
<tbody> 
<tr>
    <td class="bar" width="10%">名称</td>
    <td class="bar" width="15%">IP地址</td>
    <td class="bar" width="15%">子网掩码</td>
 
</tr><tr><td width="10%">dd</td>
<td width="15%">192.168.1.1</td>
<td width="15%"></td>
</tr><tr><td width="10%">ff</td>
<td width="15%">192.168.1.2</td>
<td width="15%"></td>
</tr><tr><td width="10%">ee</td>
<td width="15%">192.168.1.3</td>
<td width="15%"></td>
</tr></table><br><br>//供用户填写后提交的表格
<table width="80%" style="white-space:pre-wrap" class="field" border="0" cellspacing="1" cellpadding="4" align="center"><tr><td class="bar" colspan="7" align="right">
 操作 <select name="optctr_modtype">
<option></option>
<option value="mod">修改</option>
<option value="del">删除</option>
</select>对象 <select name="optctr_id">
<option></option>
<option value="16">dd</option>
<option value="19">ff</option>
<option value="18">ee</option>
</select>
</td></tr><tr>
<td width="20%" align="center"><b><font size="2" >名称</font></b></td>
<td width="80%" align="center"><input style="width:300px" type="text" name="optctr_name"></td></tr><tr><td width="20%" align="center"><b><font size="2" >IP地址</font></b></td>
<td width="80%" align="center"><input style="width:300px" type="text"  name="optctr_ip"></td></tr><tr>
        <td colspan=7 align="right"><input type="button" class="btn" name="Submit" value="确定" onclick="CheckSubmit()"></td>
     </tr>    
     </tbody>
   </table>
</p>
<br>
<br>
<br>
</form>两个表格中的 “ 名称 ” 和 “ip” 是对应的

Answer 2

<script>
function setValue(obj){
        document.getElementsByName("optctr_name")[0].value=obj.options[obj.selectedIndex].text;

var trs=document.getElementsByTagName("table")[0].getElementsByTagName("tr");
var curobj;
for(var i=0,len=trs.length;i<len;i++){
     curobj=trs[i];
 if(curobj.cells[0].innerHTML==obj.options[obj.selectedIndex].text){
        document.getElementsByName("optctr_ip")[0].value=curobj.cells[1].innerHTML;
break;

 }
}
}
</script><table width="80%" class="field" border="0" cellspacing="1" cellpadding="4" align="center" >
<tbody> 
<tr>
    <td class="bar" width="10%">名称</td>
    <td class="bar" width="15%">IP地址</td>
    <td class="bar" width="15%">子网掩码</td>
 
</tr><tr>
<td width="10%">dd</td>
<td width="15%">192.168.1.1</td>
<td width="15%"></td>
</tr><tr><td width="10%">ff</td>
<td width="15%">192.168.1.2</td>
<td width="15%"></td>
</tr><tr><td width="10%">ee</td>
<td width="15%">192.168.1.3</td>
<td width="15%"></td>
</tr></table><br><br>//供用户填写后提交的表格
<table width="80%" style="white-space:pre-wrap" class="field" border="0" cellspacing="1" cellpadding="4" align="center"><tr><td class="bar" colspan="7" align="right">
 操作 <select name="optctr_modtype">
<option></option>
<option value="mod">修改</option>
<option value="del">删除</option>
</select>对象 <select name="optctr_id" onchange="setValue(this)">
<option></option>
<option value="16">dd</option>
<option value="19">ff</option>
<option value="18">ee</option>
</select>
</td></tr><tr>
<td width="20%" align="center"><b><font size="2" >名称</font></b></td>
<td width="80%" align="center"><input style="width:300px" type="text" name="optctr_name"></td></tr><tr><td width="20%" align="center"><b><font size="2" >IP地址</font></b></td>
<td width="80%" align="center"><input style="width:300px" type="text"  name="optctr_ip"></td></tr><tr>
        <td colspan=7 align="right"><input type="button" class="btn" name="Submit" value="确定" onclick="CheckSubmit()"></td>
     </tr>    
     </tbody>
   </table>
</p>
<br>
<br>
<br>
</form>

Answer 3

<script type='text/javascript' src='/DWR_T7/dwr/interface/user.js'></script>
<script type='text/javascript' src='/DWR_T7/dwr/engine.js'></script>
<script type='text/javascript' src='/DWR_T7/dwr/util.js'></script> <script type="text/javascript">
//得到所有的省份
function proload()
{
user.getProvince(function(list)
{
for(var i=0;i<list.length;i++)
{

$("s1").options.add(new Option(list[i].proname,list[i].proid));
}
}
);
}
//根据省份ID获得市
function citylist(pid)
{
alert("进来了加载市的方法");
$("s2").options.length = 1;
alert(pid.value);
user.getCity(pid.value,function(list)
{
for(var i=0;i<list.length;i++)
{
alert(list.length);
${"s2"}.options.add(new Option(list[i].cityname,list[i].cityid));
}
}
);
}
</script>
<body onload="proload()">
<select id="s1" onchange="citylist(this)">
<option>
----请选择省份
</option>
</select>
<select id="s2">
<option>
----请选择市
</option>
</select>
</body>
这个是AJAX的级联菜单，希望对你有用。用了DWR