jquery+xml 二级联动

XML格式如下：

<?xml version="1.0" encoding="utf-8" ?>
<channel>
  <area id="1">
    <city name="珠海" />
    <city name="深圳" />
    <city name="中山" />
  </area>
  <area id="2">
    <city name="成都" />
    <city name="广安" />
  </area>
  <area id="3">
    <city name="武汉" />
    <city name="宜昌" />
  </area>
  <area id="4">
    <city name="长沙" />
  </area>
</channel>

　　

前台html：

<select id="root">
    <option value="1">广东</option>
    <option value="2">四川</option>
    <option value="3">湖北</option>
    <option value="4">湖南</option>
</select>
<select id="son" name="son">
</select>

　　

JavaScript：

<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    function getson(fpath, vals) {
        $.ajax({
            type: 'GET',
            url: fpath,
            dataType: 'xml',
            beforeSend: function () {
                $('#son').empty();
            },
            success: function (data) {
                $(data).find("area[id='" + vals + "']>city").each(
            function () {
                var son = $(this).attr("name");
                $("#son").append('<option value="' + son + '">' + son + '</option>');
            }
        );
            }
        });
    }

    $(function () {
        $('#root').change(function () {
            getson('xml/area.xml', $(this).val());
        }).trigger('change');
    });
</script>

效果预览：