JQUERY做的三级联动下拉（jquery解析XML）

猪↘專屬|华

浏览: 164014 次
性别:
来自: 深圳

最近访客更多访客>>

wyx065747

zhfpoet

冷月宫主

zjy_369

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery XML Ajax JavaScript C

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery xml解析</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
     url : "city.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();
       //alert(pname);//得到一级选中的选项
       $.ajax({
        url : "city.xml",
        success : function(xml){
         $(xml).find("province[name='" + pname+ "']>city").each(function(){
           var c = $(this).attr("name")
           //alert(c);
           $("#sCity").append("<option>"+ c + "</option>");

         });
        }
       });
    });

    //三级的菜单
    $("#sCity").change(
      function() {
       $("#address>option").remove();
       var pname1 = $("#sCity").val();
       $.ajax( {
        url : "city.xml",
        success : function(xml) {
         $(xml).find("city[name='" + pname1+ "']>address").each(function() {
            $("#address").append("<option>"+ $(this).text()+ "</option>");
           });
        }
       });
    });
});
</script>
</head>
<body>
<form id="form1">
<div>
<select id="DropProvince" style="width: 60px;">
  <option>请选择</option>
</select><h1></h1>
<select id="sCity" style="width: 60px;">
  <option>请选择</option>
</select>
<select id="address" style="width: 60px;">
  <option>请选择</option>
</select>
</div>
</form>
</body>
</html>

xml代码

<?xml version="1.0" encoding="UTF-8"?>
<provinces>
<province name="湖北">
  <city name="武汉">武汉</city>
</province>
<province name="湖南">
  <city name='株洲'></city>
  <city name='长沙'></city>
</province>
<province name="广东">
  <city name="广州">
   <address>白云区</address>
   <address>越秀区</address>
   <address>番禹区</address>
  </city>
  <city name="深圳">
   <address>福田区</address>
   <address>罗湖区</address>
   <address>南山区</address>
   <address>宝安区</address>
  </city>
</province>
</provinces>

JQUERY-xml.rar (76.9 KB)
下载次数: 123

2
顶

0
踩

分享到：

方法写的一个验证码（可以修改为JSP形式的 ... | jquery图片轮换

2010-11-08 21:54
浏览 2665
评论(3)
分类:Web前端
查看更多

3 楼猪↘專屬|华 2011-04-26

christy_fang 写道

请问一下，这两句 $("#address>option").remove(); $("#address>option").remove();是什么意思啊？好像也不是一个id。这个“>”是一个操作符的意思吗？

已经查过api 知道了，呵呵

恩，多看看API，看这个是好事

2 楼 christy_fang 2011-04-19

christy_fang 写道

请问一下，这两句 $("#address>option").remove(); $("#address>option").remove();是什么意思啊？好像也不是一个id。这个“>”是一个操作符的意思吗？

已经查过api 知道了，呵呵

1 楼 christy_fang 2011-04-19

请问一下，这两句 $("#address>option").remove(); $("#address>option").remove();是什么意思啊？好像也不是一个id。这个“>”是一个操作符的意思吗？

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论