Jquery+XML实现三级联动

前台：

 <div>
        <select id="DropProvince" style="width:60px;"  name="DropProvince" >
            <option>请选择</option>
        </select>
        <select id="sCity" style="width:60px;"  name="sCity"  >
        </select>
         <select id="sArea" style="width:60px;"  name="sArea">
        </select>
    </div>

JS：

 <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.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();
                $.ajax({ url: "City.xml",
                    success: function(xml) {
                        $(xml).find("province[name='" + pname + "']>city").each(function() {
                            $("#sCity").append("<option>" + $(this).text() + "</option>");
                        });
                    }
                });
                var carea = $("#sCity").val();
                //alert(carea);
                if (carea != '') {
                    $("#sArea>option").remove();
                    $.ajax({ url: "Area.xml",
                        success: function(xml) {
                            $(xml).find("city[name='" + carea + "']>area").each(function() {
                                //alert($(this).text());
                                $("#sArea").append("<option>" + $(this).text() + "</option>");
                            });
                        }
                    });
                }
                else {
                    $("#sArea>option").remove();
                }
            });

            $("#sCity").change(function() {
                $("#sArea>option").remove();
                var carea = $("#sCity").val();
                //alert(carea);
                $.ajax({ url: "Area.xml",
                    success: function(xml) {
                        $(xml).find("city[name='" + carea + "']>area").each(function() {
                            //alert($(this).text());
                            $("#sArea").append("<option>" + $(this).text() + "</option>");
                        });
                    }
                });
            });

        });
    </script>

XML文件：

City.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>

Area.xml结构：

<?xml version="1.0" encoding="utf-8" ?>
<cities>
  <city name="武汉">
    <area>1区</area>
    <area>2区</area>
    <area>3区</area>
  </city>
</cities>

 

到此结束！3Q

推荐博客：AnCode++（VS2017/19 插件）