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>

效果预览：　　

　　

转载于:https://www.cnblogs.com/elycir/archive/2011/08/21/2147977.html