`

jsquery解析XMl文件二级联动实现

 
阅读更多
xml文件
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="广东">
<city>哈尔冰></city>
<city>宜春</city>
<city>齐齐哈尔</city>
</province>

<province name="山东">
  <city>青岛</city>
<city>烟台</city>
<city>秦皇岛</city>
<city>济南</city>
</province>

<province name="辽宁">
  <city>抚顺</city>
<city>大连</city>
<city>铁岭</city>
<city>鞍山</city>
</province>


</china>

jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'jqparsexml.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">
-->
     <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
     <script type="text/javascript">
          $.get("rsources/country.xml",function(xml){
              var docXml=xml;
              var $provinceElement=$(docXml).find("province");
                  $provinceElement.each(function(index,domEle){
                var $provinceXmlValue= $(domEle).attr("name");
                       var  $option=$("<option></option>");
                         $option.attr("value",$provinceXmlValue);
                         $option.text($provinceXmlValue);
                         var  $provinceEle=$("#province");
                          $provinceEle.append( $option);
                      });
                $("#province").change(function(){
                     var provinceValue=$("#province").val();
                         $("#city option[value!='']").remove();
                        //便利省份 取洞下面的内容
                        $provinceElement.each(function(index,domEle){
                             var $provinceXmlValue=$(domEle).attr("name");
                                 if(provinceValue==$provinceXmlValue){
                                     var $cityElements=$(domEle).find("city");
                                     $cityElements.each(function(index,domEle){
                                             var $cityValue=$(domEle).text();
                                            var  $option=$("<option></option>");
                                            $option.attr("value",$cityValue);
                                            $option.text($cityValue);
                                            var  $cityEle=$("#city");
                                            $cityEle.append( $option);
                                         })
                                       }
                                   });
                                  });
                               });
     </script>
  </head>
  <body>
     <select name="province" id="province">
     <option>请选择。。。</option>
     </select>
      <select name="city" id="city">
        <option>请选择。。。</option>
      </select>
  </body>
</html>




分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics