package domain;import com.thoughtworks.xstream.annotations.XStreamAsAttribute;public class City { @XStreamAsAttribute PRivate String name; @XStreamAsAttribute private int code; public City() { } public City(String name, int code) { super(); this.name = name; this.code = code; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getCode() { return code; } public void setCode(int code) { this.code = code; }}package domain;import java.util.ArrayList;import java.util.List;import com.thoughtworks.xstream.annotations.XStreamAlias;import com.thoughtworks.xstream.annotations.XStreamAsAttribute;import com.thoughtworks.xstream.annotations.XStreamImplicit;@XStreamAlias("Shengfen")public class Shengfen { @XStreamAsAttribute() // 這里就是把name和code座位省份的屬性來顯示,并不是子接點(diǎn) private String name; @XStreamAsAttribute() private int code; @XStreamImplicit(itemFieldName = "CiTy") List<City> cities = new ArrayList<City>(); public Shengfen() { } public Shengfen(String name, int code) { super(); this.name = name; this.code = code; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public List<City> getCities() { return cities; } public void setCities(List<City> cities) { this.cities = cities; }}package test_main;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.thoughtworks.xstream.XStream;import domain.City;import domain.Shengfen;/** * Servlet implementation class xml5 */public class XML5 extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Shengfen> shengfens = new ArrayList<Shengfen>(); // 添加省份 Shengfen zj = new Shengfen("浙江", 1); Shengfen ah = new Shengfen("安徽", 2); Shengfen sh = new Shengfen("上海", 3); // 為省份添加城市 zj.getCities().add(new City("杭州", 1)); zj.getCities().add(new City("寧波", 2)); zj.getCities().add(new City("臺州", 3)); ah.getCities().add(new City("合肥", 1)); ah.getCities().add(new City("阜陽", 2)); ah.getCities().add(new City("蕪湖", 3)); sh.getCities().add(new City("松江", 1)); sh.getCities().add(new City("黃埔", 2)); sh.getCities().add(new City("外灘", 3)); // 在省份shengfens的list里面添加這三個(gè)省份 shengfens.add(sh); shengfens.add(ah); shengfens.add(zj); XStream xstream = new XStream(); xstream.autodetectAnnotations(true); xstream.alias("ShengFen", List.class); String xml = xstream.toXML(shengfens); // 輸出xml文件 response.setContentType("text/xml;charset=utf-8"); response.getWriter().write(xml); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); }}<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/Javascript" src="jutil.js"></script><script type="text/javascript">/* * <ShengFen> <Shengfen name="上海" code="3"> <CiTy name="松江" code="1"/> <CiTy name="黃埔" code="2"/> <CiTy name="外灘" code="3"/> </Shengfen> <Shengfen name="安徽" code="2"> <CiTy name="合肥" code="1"/> <CiTy name="阜陽" code="2"/> <CiTy name="蕪湖" code="3"/> </Shengfen> <Shengfen name="浙江" code="1"> <CiTy name="杭州" code="1"/> <CiTy name="寧波" code="2"/> <CiTy name="臺州" code="3"/> </Shengfen></ShengFen> */ var xmlDoc ; window.onload=function(){ //發(fā)出異步請求 var xhr=getXHR(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ xmlDoc=xhr.responseXML; //-----------------------------------// //給省份賦值 xml dom 和html dom //1.解析xml文檔,得到省份元素 var xmlShengfen=xmlDoc.getElementsByTagName("Shengfen"); //2.遍歷省份元素 for(var i=0;i<xmlShengfen.length;i++){ //3.創(chuàng)建html中的select中的option選項(xiàng) var codeValue=xmlShengfen[i].getAttribute("code"); var nameValue=xmlShengfen[i].getAttribute("name"); //向select標(biāo)簽中添加option內(nèi)容 var o=new Option(nameValue,codeValue); document.getElementById("s1").add(o); } } } } xhr.open("GET","XML5?time="+new Date().getTime()); xhr.send(null); } //省份變化,激活該函數(shù),給城市選項(xiàng)相應(yīng)的option function change(Shengfen){ //獲取當(dāng)前省份選項(xiàng)的value值 var SelectValue=Shengfen.value; //清楚城市的下拉選項(xiàng) document.getElementById("c1").length=1; //遍歷xml中的省份信息,比對code的值 //先要獲取的所有的省份 var xmlShengfen=xmlDoc.getElementsByTagName("Shengfen"); //遍歷 for(var j=0;j<xmlShengfen.length;j++){ if(SelectValue==xmlShengfen[j].getAttribute("code")){ //獲取該省份下面的城市的信息 var xmlCity=xmlShengfen[j].getElementsByTagName("CiTy"); //上面獲取的是CiTy元素的內(nèi)容(就是一個(gè)數(shù)組) for(var i=0;i<xmlCity.length;i++){ //給城市選選項(xiàng)框內(nèi)容賦值 var o=new Option(xmlCity[i].getAttribute("name"),xmlCity[i].getAttribute("code")); document.getElementById("c1").add(o); } } } }</script><title>省市二級聯(lián)動(dòng)</title></head><body>省份: <select id="s1" onchange="change(this)"> <option>--請選擇--</option> </select>城市:<select id="c1"> <option>--請選擇--</option> </select></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選