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

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

页面代码：

<!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>

1 楼 christy_fang 2011-04-19

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

2 楼 christy_fang 2011-04-19

christy_fang 写道

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

已经查过api 知道了，呵呵

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

christy_fang 写道

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

已经查过api 知道了，呵呵

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

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

相关推荐