求助:文本框内容怎样根据下拉列表框自动显示
Access数据库 A表的结构如图所示:
数据字段 id workname department
数据字段 自动编号 文本 文本
部分数据如下:
id workname department
1 张三 人事处
2 李四 保卫处
3 王五 计财处
4 李明 保卫处
在jsp网页中姓名的下拉列表框显示此表的全部姓名(workname),如果选择其中一项就在 "部门 "的文本框中自动显示此人所属的部门(department).不知为什么下面的程序为什么不行,请大家帮我看一下,谢谢!
<%
String sql= "select * from A ";
Statement stmt = con.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
ResultSet rs=stmt.executeQuery(sql);
%>
<script language= "javascript ">
function isam(s)
{
rs.absolute(s);
document.all( "department ").value=rs.getString(3);
}
</script>
<table> <tr> <td> 姓名： </td> <td>
<select name= "workname " onchange= "isam(options.selectedIndex); ">
<option value= " "> ----请选择---- </option>
<%
while(rs.next()){
String worknameoption=rs.getString(2);
out.println( " <option value= "+worknameoption+ "> "+worknameoption+ " </option> ");
}
%>
</select>
</td> </tr>
<tr> <td> 部门： </td> <td> <input type= "text " name= "department "/> </td> </tr> </table>
[解决办法]
兄弟用AJAX吧，你这样太麻烦了
这里有一个AJAX的二级连动下拉菜单的例子
页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<title> accountCheck.html </title>
<meta http-equiv= "keywords " content= "keyword1,keyword2,keyword3 ">
<meta http-equiv= "description " content= "this is my page ">
<meta http-equiv= "content-type " content= "text/html; charset=UTF-8 ">
<meta http-equiv= "Page-Enter "
content= "revealTrans(duration=5, transition=1) ">
<!-- <link rel= "stylesheet " type= "text/css " href= "./styles.css "> -->
<SCRIPT>
var http_request;
/*按钮点击时触发checkAccount函数*/
function checkAccount(){
alert(document.forms.ff.action);
var account = document.getElementById( "accountNo ");
var serverUrl = "CheckAccountServlet?aaa=aaaa ";
var requestMethod = "post ";
var requestData = "action=check&account= "+account.value;
sendRequestByAjax(requestMethod,serverUrl,requestData,doResponse);
}
/*具体负责处理服务器返回数据的函数*/
function doResponse(){
//当服务器将数据返回给客户端时,readyState状态值为4
if(http_request.readyState==4){
//当服务器返回的数据是正常的数据时,status状态值为200
if(http_request.status==200){
//通过XMLHttpRequest对象的responseText属性获取
//服务器返回的文本信息
//http_request.getAllResponseHeaders()
//http_request.getResponseHeader( "Server ")
var returnMsg = http_request.responseText;
showMessage(returnMsg);
}
}
}
/*用ajax方式发送数据到url指定的服务器地址上*/
function sendRequestByAjax(method,url,data,dataHandler){
//获取XMLHttpRequest对象
http_request = getAjaxObject();
//设置当服务器数据返回后,处理服务器返回数据的js函数
//这里处理函数名称是以参数形式给出
http_request.onreadystatechange = dataHandler;
//与指定的url地址建立连接
//第一个参数可以选择传递为Post或者Get,表示请求方式
//第二个参数表示请求的服务器地址,注意这里也可以传递参数
//第三个参数如果为true,表示只有建立连接成功后才执行后面的js代码
//如果为false,则相反
http_request.open(method,url,true);
//如果是以post方式发送数据,则必须加上如下代码,否则服务器将会收不到数据
//setRequestHeader( "Content-Type ", "application/x-www-form-urlencoded ");
if( "post "==method.toLowerCase()){
http_request.setRequestHeader( "Content-Type ", "application/x-www-form-urlencoded ");
}
//真正发送数据
//如果method指定是Get方式发送数据,则这里send函数参数data=null
//如果method指定是Post方式发送数据,则这里send函数参数
//具体的数据data(参数data的数据格式为:name=zhang&money=10000)
http_request.send(data);
}
/*
*最终目的只有一个,就是获得XMLHttpRequest对象(只有有了它以后,
*才能以ajax方式发送请求数据)
*函数内部的实现代码是为了兼容不同浏览器类型
*/
function getAjaxObject(){
var xmlHttpRequest;
if(window.XMLHttpRequest){//Mozilla,IE7.0
xmlHttpRequest = new XMLHttpRequest();
if(xmlHttpRequest.overrideMimeType){
xmlHttpRequest.overrideMimeType( "text/xml ");
}
}else if(window.ActiveXObject){//IE浏览器的两种方式
try{
xmlHttpRequest = new ActiveXObject( "Msxml2.XMLHTTP ");
}catch(e){
try{
xmlHttpRequest = new ActiveXObject( "Microsoft.XMLHTTP ");
}catch(e){}
}
}
return xmlHttpRequest;
}
/*显示服务器返回的信息到div标记中*/
function showMessage(message){
alert(message);
var length = message.split( ": ").length;
if(length > 1){
var scope = message.split( ": ");
var citys = document.getElementById(scope[0]);
var obj = document.getElementById(scope[0]).childNodes;
alert(scope[0]+ "= ");
for(var i=0; i < obj.length ;){
obj[i].removeNode(true);
}
for( var i = 0 ; i < ((scope[1]).split( ", ")).length ; i ++){
var op = document.createElement( "option ");
op.value = ((scope[1]).split( ", ")[i]).split( "= ")[0];
op.innerHTML = ((scope[1]).split( ", ")[i]).split( "= ")[1];
citys.appendChild(op);
}
}else{
//根据id获取div元素对象
var msgDiv = document.getElementById( "msg ");
//通过设置div元素的innerHTML属性来完成信息的显示
msgDiv.innerHTML = message;
}
}
function selectProvince(pro){
var province = pro;
var serverUrl = "CheckAccountServlet ";
var requestMethod = "post ";
var requestData = "action=pro&province= "+province.value;
sendRequestByAjax(requestMethod,serverUrl,requestData,doResponse);
}
function citys(citys){
var ccc = citys;
var serverUrl = "CheckAccountServlet ";
var requestMethod = "post ";
var requestData = "action=city&city= "+ccc.value;
sendRequestByAjax(requestMethod,serverUrl,requestData,doResponse);
}
</SCRIPT>
</head>
<body>
<form action= "22222222 " name= "ff " id= "1111 "> </form>
<input onkeydown= "if(event.keyCode==13)event.keyCode=9 " type= "text " />
<INPUT type= "text " id= "accountNo " name= "accountNo "
onkeydown= "alert(event.keyCode) " />
<DIV id= "msg ">
***
</DIV>
<BR />
<INPUT type= "Button " value= "帐号检查 " onclick= "checkAccount(); ">
<br />
<br />
<INPUT type= "Button " value= "JS测试组件位置 " onclick= "getIE(this); ">
<br />
省
<select onchange= "selectProvince(this); ">
<option value= "sichuan ">
四川
</option>
<option value= "chongqing ">
重庆
</option>
</select>
市
<select id= "citys " onchange= "citys(this); ">
<option value= "chengdu ">
成都
</option>
<option value= "meishan ">
眉山
</option>
<option value= "minayang ">
绵阳
</option>
<option value= "leshan ">
乐山
</option>
<option value= "nanchong ">
南充
</option>
</select>
区
<select id= "areas ">
<option value= "longquan ">
龙泉
</option>
<option value= "shuangliu ">
双流
</option>
</select>
<br />
</body>
</html>
后台代码：
//如果输出信息中包含中文信息,则需要设置字符集编码为gb2312
//否则,客户端收到的信息将会是乱码
response.setContentType( "text/html;charset=gb2312 ");
//设置响应报文头,使浏览器不做数据缓存
response.setHeader( "Cache-Control ", "no-cache ");
PrintWriter out = response.getWriter();
System.out.println(request.getParameter( "aaa "));
String action = request.getParameter( "action ");
if( "check ".equals(action)){
//获取客户端请求帐户数据
String accountNo = request.getParameter( "account ");
System.out.println(accountNo);
if( "zhangsan ".equalsIgnoreCase(accountNo)){
out.println( " <input type=text id=df name=a12 /> ");
}else{
System.out.println(accountNo);
out.println( "用户帐户可用33 ");
}
}
else if( "pro ".equals(action)){
String pro = request.getParameter( "province ");
if( "sichuan ".equals(pro)){
out.println( "citys:chengdu=成都,meishan=眉山,leshan=乐山,mianyang=绵阳,nanchong=南充 ");
}else if( "chongqing ".equals(pro)){
out.println( "citys:shapingba=沙坪坝,yuzhong=渝中区,baibei=北倍,wanyuan=万源 ");
}
}
else if( "city ".equals(action)){
String pro = request.getParameter( "city ");
if( "chengdu ".equals(pro)){
out.println( "areas:jinniu=金牛,chenghua=成华 ");
}else {
out.println( "areas:jintang=金堂,pujiang=蒲江 ");
}
}
//信息输出完成后,关闭输出流
out.close();
把上面的输出信息用从数据库里面提取的信息代替就可以了
[解决办法]
代码是长了一点，不过写得却是很详细的
[解决办法]
<script language= "javascript ">
function isam(s)
{
rs.absolute(s);
document.all( "department ").value=rs.getString(3);
}
这里有问题
javascript 不能直接调用java的代码 这样写的话是肯定不行的
[解决办法]
<html>
<head> <title> title </title> </head>
<body>
<script>
function doChange(){
var sel = document.getElementsByName( "select ")[0];
var val = sel.options[sel.selectedIndex].value;
var tbl = document.getElementById( "tbl ");
for(var i=0;i <tbl.rows.length;i++){
if(tbl.rows[i].cells[0].innerText == val){
document.getElementById( "a1 ").value = tbl.rows[i].cells[1].innerText;
document.getElementById( "a2 ").value = tbl.rows[i].cells[2].innerText;
document.getElementById( "a3 ").value = tbl.rows[i].cells[3].innerText;
break;
}
}
}
</script>
<label>
<select name= "select " onchange= "doChange() ">
<option value= "请选择 " selected= "selected "> 请选择 </option>
<option value= "company1 "> company1 </option>
<option value= "company2 "> company2 </option>
<option value= "company3 "> company3 </option>
</select>
<input type= "text " id= "a1 " />
<input type= "text " id= "a2 " />
<input type= "text " id= "a3 " />
</label>
<table width= "246 " height= "122 " border= "1 " id= "tbl ">
<tr>
<td width= "61 "> company1 </td>
<td width= "53 "> 12 </td>
<td width= "51 "> 34 </td>
<td width= "53 "> 56 </td>
</tr>
<tr>
<td> company2 </td>
<td> 54 </td>
<td> 76 </td>
<td> 87 </td>
</tr>
<tr>
<td> company3 </td>
<td> 44 </td>
<td> 33 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
这个ajax例子很适合你
[解决办法]
<script language= "javascript ">
function isam(s)
{
rs.absolute(s);
document.all( "department ").value= <%=rs.getString(3)%> ;
}
