日期:2014-05-16  浏览次数:20494 次

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


比如表单中有一个表格,表格里有几栏需要用户填写的文本框,然后提交填写信息给cgi,

表格里有下拉框可以选择操作对象,现在希望用户在下拉框里选择好对象后,与该对象相关的旧数据就立刻显示在对应的文本框中。

另外,这些旧数据在本网页上是已有的,只是想在用户选择操作对象后,再实时显示一下,这样方便用户操作。


请问这样的功能该怎么实现?

谢谢

------解决方案--------------------
HTML code
<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>

------解决方案--------------------
<script type='text/javascript' src='/DWR_T7/dwr/interface/user.js'></script>
<script type='text/javascript' src='/DWR_T7/dwr/engine.