demo.jsp
- <%@ page language= "java" import = "java.util.*" pageEncoding= "utf-8" %>
- <html>
- <head>
- <title>jquery xml解析</title>
- <script type="text/javascript" src= "js/jquery-1.3.2.js" ></script>
- <script type="text/javascript" >
- $(document).ready(
- function() {
- $.ajax( {
- url : "xx.xml" ,
- success : function(xml) {
- $(xml).find("province" ).each(function() {
- var t = $(this ).attr( "name" ); //this->
- $("#DropProvince" ).append(
- "<option>" + t + "</option>" );
- });
- }
- });
- $("#DropProvince" ).change(
- function() {
- $("#sCity>option" ).remove();
- var pname = $("#DropProvince" ).val();
- $.ajax( {
- url : "xx.xml" ,
- success : function(xml) {
- $(xml).find(
- "province[name='" + pname
- + "']>city" ).each(
- function() {
- $("#sCity" ).append(
- "<option>"
- + $(this )
- .text()
- + "</option>" );
- });
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <form id="form1" >
- <div>
- <select id="DropProvince" style= "width: 60px;" >
- <option>请选择</option>
- </select>
- <select id="sCity" style= "width: 60px;" >
- </select>
- </div>
- </form>
- </body>
- </html>
-
xx.xml
- <?xml version= "1.0" encoding= "utf-8" ?>
- <provinces>
- <province name="湖北" >
- <city>武汉</city>
- <city>黄石</city>
- <city>宜昌</city>
- <city>天门</city>
- </province>
- <province name="湖南" >
- <city>邵阳</city>
- <city>长沙</city>
- <city>岳阳</city>
- </province>
- <province name="广东" >
- <city>广州</city>
- <city>深圳</city>
- </province>
- </provinces>