<select> 联动 ajax

最新推荐文章于 2021-06-05 09:46:56 发布

ly_wen00

最新推荐文章于 2021-06-05 09:46:56 发布

阅读量147

点赞数

分类专栏： java 文章标签： Ajax Servlet XML SQL Server SQL

java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<%@ page language="java" import="java.util.*,java.lang.*" contentType="text/html; charset=GBK" pageEncoding="GBK"%>

<HTML>
<HEAD>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta http-equiv="Content-Type" content="text/xml;charset=GBK"/>
<META name="GENERATOR" content="IBM WebSphere Page Designer V3.5 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet" href="/doc/theme/normal.css">
<script Language="JavaScript" src="/doc/checkjs/timein.js"></script>
<script language="JavaScript" src="/doc/checkjs/check.js"></script>
<script language="javascript">

function addList(){

var thelist=document.form1.leftlist;
var theText=document.form1.theText.value;
var theValue=document.form1.theValue.value;

var theOption=new Option(theText,theValue);
var thePostion=thelist.options.length;
thelist.options[thePostion] =theOption;

}
function movlist(a,b){

var folist=document. form1.elements[a];
var tolist=document. form1.elements[b];
var theNum= folist.options.selectedIndex;

while(theNum>=0){

var theText=folist.options[theNum].text;
var theValue=folist.options[theNum].value;
var newOption=new Option(theText,theValue);
var theNum2=tolist.options.length;

tolist.options[theNum2]=newOption;

folist.options[theNum]=null;
theNum=folist.options.selectedIndex;

}

}
function delLlis(){

var theForm=document.form1;

var formNum1=theForm.leftlist.options.selectedIndex;
if(formNum1>=0){
theForm.leftlist.options[formNum1]=null;

}

var formNum2=theForm.rightlist.options.selectedIndex;
if(formNum2>=0){
theForm.rightlist.options[formNum2]=null;
}
}
var req;
window.οnlοad=function(){
}

function Change_Select()
{
var type=document.getElementById('DocumentType').value;
var url="/doc/servlet/SelectServlet?type="+escape(type);
if(window.XMLHttpRequest)
{
req=new XMLHttpRequest();
}else if(window.ActiveXObject)
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}

if(req)
{
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
}

function callback()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
parseMessage();
}else{
alert("Not able to retrieve description"+req.statusText);
}
}
}

function parseMessage()
{
var xmlDoc=req.responseXML.documentElement;
var xSel=xmlDoc.getElementsByTagName('select');
var select_root=document.getElementById('skill');
select_root.options.length=0;

for(var i=0;i<xSel.length;i++)
{
var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
var xText=xSel[i].childNodes[1].firstChild.nodeValue;
var option=new Option(xText,xValue);
try{
select_root.add(option);
}catch(e){
}
}
}
</script>

<jsp:useBean id="dataBean" scope="request" class="initBean.BaseBean" />

<jsp:useBean id="uiBean" scope="request" class="initBean.PageBean" />
</HEAD>
<body>
<form name="form1" method="POST">
<br>
<TABLE width="353" border="0" align="center">
<tr>
<td width="309" colspan="2" align="left">
选择视图：
<SELECT fieldflag='Y' width="153" name='DocumentType' onChange="Change_Select()">
<OPTION value=>
</OPTION>
<OPTION value=wsView>
文书视图
</OPTION>
<OPTION value=kjView>
科技视图
</OPTION>
<OPTION value=zpView>
照片视图
</OPTION>
<OPTION value=htView>
合同视图
</OPTION>
</SELECT>
</td>
</tr>
</TABLE>
<table width="353" border="0" align="center">
<tr>
<td height=25 colspan=3>选择字段：(按住ctrl键可多选)</td>
</tr>
<tr>
<td width=119>
<select name="leftlist" id='skill' size="10" style="WIDTH: 119px;color:#666666" multiple="MULTIPLE">
</SELECT>
</td>
<td width=65 align=center>
<input name="Submit2" type="button" value="添加 >>" οnclick="movlist('leftlist','rightlist')" /><BR><BR>
<input name="Submit3" type="button" value="<< 删除" onClick="movlist('rightlist','leftlist')" />
</td>
<td width=119><select name="rightlist" size="10" multiple="multiple" style="WIDTH: 119px;color:#666666"></SELECT> </td>
</tr>
<tr>
<td colspan="3" align="center">
<input class=btn type="button" name="B1" value="确定" onClick="commit(0)">
</tr>
</tr>
</table>
<input type="hidden" name="fieldnames">
</form>
<script language="JavaScript">
function commit(flag)
{
if(check('ok'))
{
window.document.form1.fieldnames.value="";
for (var i=0;i<window.document.form1.length;i++)
{
if(window.document.form1.item(i).fieldflag=="Y")
{
var temp1=window.document.form1.item(i).value;
temp1=YMYTrim(temp1);
if(temp1.length!=0)
{
window.document.form1.fieldnames.value=window.document.form1.fieldnames.value+","+window.document.form1.item(i).name;
window.document.form1.item(i).value=temp1;
}
}
}
var temp2=window.document.form1.fieldnames.value;
temp2=temp2.substring(1);
window.document.form1.fieldnames.value=temp2;
if(flag==0)
document.all.form1.action="/doc/servlet/system_data.viewWS";
document.all.form1.submit();
}
}
</script>
</body>
</html>

[code]
package system_data;

import java.io.IOException;
import java.sql.SQLException;
import java.util.Vector;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import initBean.BaseBean;

public class SelectServlet extends HttpServlet {

/**
* Constructor of the object.
*/
public SelectServlet() {
super();
}

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/xml");
//response.setHeader("Cache-Control","no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/xml;charset=GBK");
// response.setCharacterEncoding(arg0)
response.setCharacterEncoding("GBK");
BaseBean basebean = new BaseBean();
String viewType=request.getParameter("type").toString();
System.out.println(viewType);
try {
String Sql="SELECT EN_NAME,CH_NAME FROM TABINFO WHERE viewType="+"'"+viewType+"'"+" and flag='0'";
int count = basebean.queryRecordMulti(Sql,2);
Vector vec = null;
Vector vecItem = null;
String xml_start="<?xml version=\"1.0\" encoding=\"gb2312\"?>"+"<selects>";
String xml_end="</selects>";
String xml="";
vec = basebean.getRecords();
System.out.println(vec.size());
for(int i=0;i<vec.size();i++){
vecItem=(Vector)vec.elementAt(i);
String s1=((String)vecItem.elementAt(0)).trim();
String s2=((String)vecItem.elementAt(1)).trim();
if(i<2){
xml="<select><value>"+s2+"</value><text>"+s1+"</text></select>";
}else{
xml +="<select><value>"+s2+"</value><text>"+s1+"</text></select>";
}
}
// out.println("<?xml version=\"1.0\" encoding=\"gb2312\"?>");
String last_xml=xml_start+xml+xml_end;
response.getWriter().write(last_xml);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request,response);
}

/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}

}
[/code]