`

JS + XML 联动菜单 支持IE、FireFox

IEXMLFirefoxjQueryJ# 
阅读更多

在网上找了一些关于省市县的三级联动菜单，有些不能用，有些也只能在IE里用，自己用JQuery来写了一下，现在可以同时支持IE和FireFox(不过只能放在项目中并启动项目才能用)，所以写出来让大家参考一下，在附件中提供了省市县的XML文件，以下代码的源文件，以及JQuery的核心js文件，还有省市县的Excel文件，如果想知道怎么把Excel中的数据迁移到XML中去的话，

请参考文章：

http://zsl131.iteye.com/admin/blogs/575409

 

<%@page pageEncoding="UTF-8" language="java" %>

<html>

<head>

    <title>js + xml 省市县三级联动</title>

  <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.3.2.min.js"></script>

  <script language="javascript" type="text/javascript">

  $j(function(){

    var contextPath = $j("#contextPath").val();

    var path = contextPath+"/xml/Area.xml";

     $j.ajax({url:path,

          success:function(xml){

                 $j(xml).find("province").each(function(){

                      var t = $j(this).attr("name");//this->

                      $j("#DropProvince").append("<option value='"+ $j(this).attr("name")+"'>"+t+"</option>");

                 });

          }

     });

     $j("#DropProvince").change(function(){

             $j("#DropCity>option").remove();

             $j("#DropCountry>option").remove();

             $j("#DropCountry").append("<option value=''>选择区</option>");

             var pname = $j("#DropProvince").val();

             $j.ajax({url:path,

                 success:function(xml){

                   $j("#DropCity").append("<option value=''>选择市</option>");

                     $j(xml).find("province[name='"+pname+"']>city").each(function(){

                         $j("#DropCity").append("<option value='"+$j(this).attr("name")+"'>"+$j(this).attr("name")+"</option>");

                     });

                 }

             });

     });

     $j("#DropCity").change(function(){

          $j("#DropCountry>option").remove();

          var pname = $j("#DropCity").val();

          $j.ajax({url:path,

              success:function(xml){

                $j("#DropCountry").append("<option value=''>选择区</option>");

                  $j(xml).find("city[name='"+pname+"']>country").each(function(){

                      $j("#DropCountry").append("<option value='"+$j(this).attr("value")+"'>"+$j(this).attr("name")+"</option>");

                  });

              }

          });

  });

    

  }); 

  </script>

  <style type="text/css">

    select {

       -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

       color:red;

    }

  </style>

</head>

<body>

<input type="hidden" value="<%=request.getContextPath() %>" id="contextPath"/>

    <select id="DropProvince" name="province">

       <option value="" selected="selected">省/直辖市</option>

   </select>

    <select id="DropCity" name="city">

      <option value="" selected="selected">请选择</option>

   </select>

    <select id="DropCountry" name="country">

      <option value="" selected="selected">请选择</option>

   </select>

</body>

</html>

分享到：
| 把Excel文件中的数据直接读取之后写到XML ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics