Posted on 2008-09-01 00:18
橡皮人 閱讀(461)
評(píng)論(0) 編輯 收藏
一個(gè)簡(jiǎn)單的純手工的Ajax&&JSP二級(jí)聯(lián)動(dòng)。
<script type="text/javascript">
var req;
window.onload=function()
{//頁(yè)面加載時(shí)的函數(shù)
}
function Change_Select(){//當(dāng)?shù)谝粋€(gè)下拉框的選項(xiàng)發(fā)生改變時(shí)調(diào)用該函數(shù)
var province = document.getElementById('fatherType').value;
var url = "/nicholas/select?fatherType="+province;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url,true);
//指定回調(diào)函數(shù)為callback
req.onreadystatechange = callback;
req.send(null);
}
}
//回調(diào)函數(shù)
function callback(){
if(req.readyState ==4){
if(req.status ==200){
parseMessage();//解析XML文檔
}else{
alert("不能得到描述信息:" + req.statusText);
}
}
}
//解析返回xml的方法
function parseMessage(){
var xmlDoc = req.responseXML.documentElement;//獲得返回的XML文檔
var xSel = xmlDoc.getElementsByTagName('select');
//獲得XML文檔中的所有<select>標(biāo)記
var select_root = document.getElementById('childType');
//獲得網(wǎng)頁(yè)中的第二個(gè)下拉框
select_root.options.length=0;
//每次獲得新的數(shù)據(jù)的時(shí)候先把每二個(gè)下拉框架的長(zhǎng)度清0
for(var i=0;i<xSel.length;i++){
var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
//獲得每個(gè)<select>標(biāo)記中的第一個(gè)標(biāo)記的值,也就是<value>標(biāo)記的值
var xText = xSel[i].childNodes[1].firstChild.nodeValue;
//獲得每個(gè)<select>標(biāo)記中的第二個(gè)標(biāo)記的值,也就是<text>標(biāo)記的值
var option = new Option(xText, xValue);
//根據(jù)每組value和text標(biāo)記的值創(chuàng)建一個(gè)option對(duì)象
var option2=String.fromCharCode(option);
try{
select_root.add(option);//將option對(duì)象添加到第二個(gè)下拉框中
}catch(e){
}
}
}
</script>
父類別：
<select name="fatherType" id="fatherType" onChange="Change_Select()">
<% for (int i = 0; i < list.size(); i++) {
father = (FatherType) list.get(i);
String selected = "";
%>
<option value="<%=father.getType()%>"><%=father.getType()%></option>
<%
}
%>
</select> <br>
子類別：
<select id="childType" name="childType">
<option></option>
</select>
下面是nicholas項(xiàng)目下的select Servlet
public class SelectServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml"); //xml傳遞過(guò)來(lái)的參數(shù)是以UTF-8編碼
response.setHeader("Cache-Control", "no-cache");
request.setCharacterEncoding("gbk");
String targetId = request.getParameter("fatherType");
targetId=new String(targetId.getBytes("ISO-8859-1"),"gbk");//將已經(jīng)亂碼的參數(shù)轉(zhuǎn)碼為中文
// 獲得請(qǐng)求中參數(shù)為id的值
String xml_start = "<selects>";
String xml_end = "</selects>";
String xml = "";
List list = null;
ChildType child = null;
TypeDAO typedao = new TypeDAO();
list = typedao.getChildType(targetId); //根據(jù)父類型參數(shù)查詢出子類型參數(shù)
for (int i = 0; i < list.size(); i++) {
child = (ChildType) list.get(i);
xml += "<select><value>" + child.getType() + "</value><text>"
+ child.getType() + "</text></select>";
}
String last_xml = xml_start + xml + xml_end;
response.setContentType("text/xml;charset=utf-8"); //將中文參數(shù)傳遞時(shí)先轉(zhuǎn)碼為ＵＴＦ－８
PrintWriter out = response.getWriter();
out.write(last_xml);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}