求教：同一个页面中值传递的问题
在一个页面需要实现如下的功能：
通过选择下拉框来选中某一个值，然后降值自动传递给相同页面中的其他参数来完成相应的功能，该怎么实现呢？
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
</HEAD>
<script language=JavaScript>
function passvalue(){
for(var i=0;i <document.testdata.testvalue.options.length;i++)
{
if (document.testdata.testvalue.options[i].selected==true)
{
document.testdata.inputdata.value=document.testdata.testvalue.options[i].value;
}
}
}
</script>
<BODY>
<form name= "testdata ">
<select name= "testvalue " onchange= "passvalue() ">
<option value=1> test1 </option>
<option value=2> test2 </option>
<option value=3> test3 </option>
</select>
<input type=text name= "inputdata ">
</form>
</BODY>
</HTML>
用onchange不会刷新啊
[解决办法]
<%
String name2 = request.getParameter( "name ");
if(name2 != null && ! " ".equals(name2))
{
do something for name2
}
%>
<form name= "formname " method= "post " action= "***.jsp " >
<table align= "center " border= "0 " cellpadding= "0 " cellspacing= "1 " >
<tr>
<td> 姓名：
<%
if(name2 != null && ! " ".equals(name2))
{
%>
<input name= "name " type= "text " value= ' <%=name2 %> '
onBlur= "javascript:if(document.all.formname.name.value != ' ')
{document.formname.action= ' ';document.formname.submit();}else alert
( 'please input '); ">
</td>
<%
}
else
{
%>
<input name= "injure_name " type= "text " value= ' ' onBlur= "javascript:if
(document.all.formname.name.value != ' ')
{document.formname.action= ' ';document.formname.submit();}else alert
( 'please input '); " ">
</td>
<%
}
%>
</tr>
</table>
[解决办法]
<html:html locale= "true ">
<head>
<html:base />
<title> telAdd.jsp </title>
<link rel= "stylesheet " href= "css/aa.css " type= "text/css ">
<meta http-equiv= "content-type " content= "text/html; charset=UTF-8 "/>
<!--
<link rel= "stylesheet " type= "text/css " href= "styles.css ">
-->
<script language= "JavaScript ">
function getDept(com)
{
/**alert( "asd "+com.value);
self.location= "telSearch.do?action=change&com_id= "+com.value;
document.telListForm.action = "telSearch.do?action=change&com_id= "+com.value;
document.telListForm.submit();
**/
}
</script>
</head>
<body >
<table align= "center " cellSpacing= "0 " cellPadding= "0 " width= "100% ">
<tr>
<td align= "center " valign= "middle ">
<h2> 添加新部门 </h2>
</td>
</tr>
<tr>
<td>
<html:form action= "/deptAdd.do?action=deptAdd " method= "post "> <div align= "center ">
<table>
<tr> <td class= "OnlineForm_Label_TD "> 公 司： </td> <td class= "OnlineForm_Input_TD "> <html:select property= "com_id ">
<html:options collection= "com " property= "id " labelProperty= "name1 "/>
</html:select> </td> </tr>
<tr> <td class= "OnlineForm_Label_TD "> 部门名称: </td>
<td class= "OnlineForm_Input_TD "> <html:text property= "dept_name "> </html:text> </td>
<td> <html:submit property= "submit " value= "添加 "> </html:submit>
<html:reset value= "重填 "> </html:reset> </td> </tr>
</table>
<div align= "center "> <html:errors/> </div>
</html:form>
</td>
</tr>
</table>
</body>
</html:html>
[解决办法]
<html:html locale= "true ">
<head>
<html:base />
<title> telSearch.jsp </title>
<link rel= "stylesheet " href= "css/aa.css " type= "text/css ">
<meta http-equiv= "content-type " content= "text/html; charset=UTF-8 "/>
<script type= "text/javascript ">
function getDept(com)
{
/**
alert( "asd "+com.value);
self.location= "telSearch.do?action=change&com_id= "+com.value;
**/
document.comAddForm.action = "comChange.do?com_id= "+com.value;
document.comAddForm.submit();
}
</script>
</head>
<%-- out.println(request.getAttribute( "dept ")); --%>
<body >
<table align= "center " cellSpacing= "0 " cellPadding= "0 " width= "100% ">
<tr >
<td align= "center " valign= "middle "> <h2> 亚洲铝业集团通讯录 </h2>
</td>
</tr>
<tr> <td>
<html:form action= "/comChange.do " method= "post "> <div align= "center ">
<table>
<tr> <td class= "OnlineForm_Label_TD "> 公司： </td> <td class= "OnlineForm_Input_TD "> <html:select property= "com_id " onchange= "getDept(this) ">
<html:options collection= "com " property= "id " labelProperty= "name1 "/>
</html:select> </td> </tr>
</table>
</div>
</html:form>
</td>
<tr>
<td>
<%//DeptList com = new DeptList();
//ArrayList deptList = (ArrayList)com.getComList();
DeptList com = new DeptList();
String com_id = "1 ";
com_id = request.getParameter( "com_id ");
if(com_id == null || com_id.equals( "0 " ))
{
out.println( " <center> <h1> 请选择公司 ");
}
else{
int id = Integer.parseInt(com_id);
ArrayList deptList = (ArrayList)com.getComList(id);
ComForm deptDetail = new ComForm();
//ArrayList deptList = (ArrayList)request.getAttribute( "dept ");
// ComForm deptDetail = new ComForm();
//out.print(deptList.size());
// if(deptList !=null && deptList.size()> 0){
%>
<table align= "center " cellpadding= "0 " cellspacing= "0 " style= "border: 1px solid #abccab; " width= "60% ">
<tr class= "portlet-section-header " style= "font-weight: bold; ">
<td style= "border-bottom: 1px solid #abccab; " > 编号 </td>
<td style= "border-bottom: 1px solid #abccab; "> 部门名称 </td>
<td style= "border-bottom: 1px solid #abccab; "> 编辑 </td>
<td style= "border-bottom: 1px solid #abccab; "> 删除 </td> </tr>
<%
int j=1;
for(int i = 0;i <deptList.size();i++){
deptDetail = (ComForm)deptList.get(i);
if(deptDetail != null){
if(j==1){
j=2;
%>
<tr class= "portlet-section-body " onmouseleave= "this.className = 'portlet-section-body '; "
onmouseenter= "this.className = 'portlet-section-body-hover '; " style= "font-weight: normal; ">
<%}
else
{
j=1; %>
<tr class= "portlet-section-alternate " onmouseleave= "this.className = 'portlet-section-alternate '; "
onmouseenter= "this.className = 'portlet-section-alternate-hover '; " style= "font-weight: normal; ">
<%}%>
<td> <%=deptDetail.getDept_id() %> </td>
<td > <%=deptDetail.getDept_name() %> </td>
<td width= "10% "> <a href= "deptEdit.do?action=edit&dept_id= <%=deptDetail.getDept_id()%> &dept_name= <%=deptDetail.getDept_name() %> "> <img border= "0 " align= "absmiddle " onmousemove= "ToolTip.show(event, this, '编辑 ') " src= "images/edit.gif "/> </a> </td>
<td width= "10% "> <a href= "deptEdit.do?action=del&key= <%=deptDetail.getDept_id()%> "> <img border= "0 " align= "absmiddle " onmousemove= "ToolTip.show(event, this, '删除 ') " src= "images/delete.gif "/> </a> </td> </tr>
<%}
}
}
//else{
%>
</table>
</td>
</tr>
</body>
</html:html>
[解决办法]
创建连接,判断浏览器
var http_request=false;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq=new XMLHttpRequest();
}
else if(window.ActiveXObject){
try{
XMLHttpReq=new ActiveXObject( "Msxml2.XMLHTTP ");
}catch(e){
try{
XMLHttpReq=new ActiveXObject( "Microsoft.XMLHTTP ");
}catch(e){
}
}
}
}
//发送请求
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open( "GET ",url,true);
XMLHttpReq.onreadystatechange = progessRequest1;
XMLHttpReq.send(null);
}
//判断接收请求
function progessRequest1(){
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
alert(XMLHttpReq.responseText);
var obj=document.getElementById( "city ");
var xmlDoc=XMLHttpReq.responseXML;
var citys=xmlDoc.getElementsByTagName( "city ");
if(obj!=null){
obj.length=0;
}
for(var i=0;i <citys.length;i++){
var city=citys[i];
obj.options.add(new Option(city.getElementsByTagName( "name ")[0].firstChild.nodeValue,city.getElementsByTagName( "id ")[0].firstChild.nodeValue));
}
}else{
alert( "请求异常11 ");
}
}
}
//2个下拉框
<td>
<select name= "provice " onchange= "changeProvice() ">
<option value= "1 "> 福建 </option>
<option value= "2 "> 北京 </option>
</select>
<select name= "city " >
<option value= "0 "> 请选择 </option>
</select>
</td>
//servlet
response.setContentType( "text/xml; charset=utf-8 ");
response.setHeader( "Cache-Control ", "no-cache ");
String province=request.getParameter( "province ");
ArrayList city=new ArrayList();
java.io.PrintWriter out = response.getWriter();
city=getCity(province);//根据传递进来的省的ID查询下一级的ID
String str=parasToXML(city);
response.getWriter().write(parasToXML(city));
response.getWriter().flush();
response.getWriter().close();
//转化XML方法
public static String parasToXML(ArrayList list){
StringBuffer buf = new StringBuffer();
buf.append( " <?xml version=\ "1.0\ " encoding=\ "UTF-8\ "?> ");
buf.append( " <citys> ");
//System.out.println(list.size());
for(int i=0;i <list.size();i++){
Decode decode=(Decode)list.get(i);
buf.append( " <city> ");
buf.append( " <id> "+decode.getId()+ " </id> ");
buf.append( " <name> "+decode.getName()+ " </name> ");
buf.append( " </city> ");
}
buf.append( " </citys> ");
return buf.toString();
}
代码差不多就这些，大概的简单AJAX 改一改应该可以完成你所需要的功能，
[解决办法]
我帮你写的代码如下,看符不符合你的要求,符合的话请记得给分哦!!!
<html>
<script>
function Change(p)
{
document.getElementById( "Sqlstr ").value=p;
}
function jumping()
{
var p = document.getElementById( "SqlStr ").value;
//查询条件就是这里的 SqlStr ,通过下拉框中的选项来选择的
location.href= "跳转到指定的jsp或servlet?Sql= "+SqlStr;
}
</script>
<body>
选项:
<select name= "Mychose " onchange= "Change(this.value) ">
<option value= "第1个值 "> 第1个值 </option>
<option value= "第2个值 "> 第2个值 </option>
<option value= "第3个值 "> 第3个值 </option>
<option value= "第4个值 "> 第4个值 </option>
</select>
<br/>
<br/>
<input type=text name= "SqlStr "> <br/> <br/>
<input type=button value= "查询 " onclick= "jumping() " name= "Select ">
</body>
</html>
[解决办法]
<%@ page language= "java " pageEncoding= "gbk "%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+ ":// "+request.getServerName()+ ": "+request.getServerPort()+path+ "/ ";
request.setCharacterEncoding( "GBK ");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<base href= " <%=basePath%> ">
<title> My JSP 'index.jsp ' starting page </title>
<meta http-equiv= "pragma " content= "no-cache ">
<meta http-equiv= "cache-control " content= "no-cache ">
<meta http-equiv= "expires " content= "0 ">
<meta http-equiv= "keywords " content= "keyword1,keyword2,keyword3 ">
<meta http-equiv= "description " content= "This is my page ">
<!--
<link rel= "stylesheet " type= "text/css " href= "styles.css ">
-->
</head>
<script language= "javascript ">
function getResult(stateVal) {
var url = "/AjaxTest/servlet/MyServlet?state= "+stateVal;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject( "Microsoft.XMLHTTP ");
}
if(req){
req.open( "GET ",url, true);
req.onreadystatechange = complete;
req.send(null);
}
}
function complete(){
if (req.readyState == 4) {
if (req.status == 200) {
var city = req.responseXML.getElementsByTagName( "city ");
alert(city.length);
var str=new Array();
for(var i=0;i <city.length;i++){
str[i]=city[i].firstChild.data;
}
buildSelect(str,document.getElementById( "city "));
}
}
}
function buildSelect(str,sel) {
sel.options.length=0;
for(var i=0;i <str.length;i++) {
sel.options[sel.options.length]=new Option(str[i],str[i])
}
}
</script>
<body>
<form name= "form1 " method= "post " action= " ">
省:
<select name= "sheng " id= "sheng " onChange= "getResult(this.value) ">
<option value= "sd "> 山东省 </option>
<option value= "hlj "> 黑龙江省 </option>
<option value= "js "> 江苏省 </option>
</select>
市:
<select id= "city ">
</select>
</form>
<br>
</body>
</html>
