jq三级联动

用jq+ajax+xml做的三级联动

html:
<form action="" method="post">
<select name="" id="sheng">
<option value="s">--省份--</option>
</select>
<select name="" id="city">
<option value="">--城市--</option>
</select>
<select name="" id="town">
<option value="">--县区--</option>
</select>
</form>

链接的是xml01.xml文件

<?xml version='1.0' encoding='utf-8'?>
<Location>
    <Provinces name='广东' code='1'>
        <city name='广州' code='1'>
            <area name='天河区' code='1'></area>
            <area name='天河区' code='2'></area>
        </city>
        <city name='东莞' code='2'>
            <area name='新镇' code='2'></area>
            <area name='天河区' code='2'></area>
        </city>
        <city name='佛山' code='3'>
            <area name='顺德' code='3'></area>
            <area name='天河区' code='2'></area>
        </city>
    </Provinces>
    <Provinces name='广西' code='2'>
        <city name='南宁' code='1'>
            <area name='西乡' code='1'></area>
            <area name='天河区' code='2'></area>
        </city>
        <city name='桂林' code='2'>
            <area name='江南区' code='2'></area>
            <area name='天河区' code='2'></area>
        </city>
        <city name='柳州' code='3'>
            <area name='琅东区' code='3'></area>
            <area name='天河区' code='2'></area>
        </city>
    </Provinces>
</Location>

在中加入<script type="text/javascript" src="jquery.min.js"></script>

        <script>
            $(function() {
                $.ajax({
                    url: '/xml01.xml',
                    type: 'get',
                    async: true,
                    success: function(str) {
                        var p = $(str).find('Provinces');
                        $(p).each(function() {
                            $('#sheng').append("<option>" + $(this).attr('name') + "</option>")
                        })
                    }
                })
                $('#sheng').change(function() {
                    var countryvalue = $("#sheng").val();
                    $.ajax({
                        type: "get",
                        url: "/xml01.xml",
                        async: true,
                        success: function(str) {
                            $('#city').find('option').remove();
                            var C = $(str).find('Provinces[name='+countryvalue+']');
                            $("#city").append("<option value='0'>--城市--</option>");
                            console.log(C);
                            $(C).find('city').each(function() {
                                $('#city').append("<option>" + $(this).attr('name') + "</option>")
                            })
                        }
                    });
                })
                $('#city').change(function() {
                    var countryvalue = $("#city").val();
                    var selectvalue = $(this).name;
                    $.ajax({
                        type: "get",
                        url: "/xml01.xml",
                        async: true,
                        success: function(str) {
                            $('#town').find('option').remove();
                            var C = $(str).find('city[name='+countryvalue+']');
                            $("#town").append("<option value='0'>--县区--</option>");
                            console.log(C);
                            $(C).find('area').each(function() {
                                $('#town').append("<option>" + $(this).attr('name') + "</option>")
                            })
                        }
                    });
                })
            })

        </script>

这是简单的编写