jquery解析XML文件实现的省市联动

XML我是直接在网上下载的文件包 拿过来用的

jquery我用的是3.1的

前台页面

 <form action="buy.html" method="get">
        <div>
            <table>
                <tr>
                    <td colspan="2" align="center">送货地址确认</td>
                </tr>
                <tr>
                    <td align="right">省份：</td>
                    <td>
                        <select id="province">
                            <option>请选择</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">市/区：</td>
                    <td>
                        <select id="city">
                           <option>请选择</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">街道：</td>
                    <td>
                        <input type="text" name="txtStreet" class="street" />
                    </td>
                </tr>
                <tr>
                    <td align="right">门牌号：</td>
                    <td><input type="text" name="txtHouseNum" class="street" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="确认" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

jquery代码

//解析并加载xml文件
$.get("xml/city.xml", function(xml) {
    //获得xml文件
    var docXml = xml;
    //使用find方法找到对应的节点元素 然后使用each方法遍历所有数据
    //$(selector).each(function(index,element))
    //index - 选择器的 index 位置 element - 当前的元素（ 也可使用 "this"选择器）
    var $provinceElements = $(docXml).find("province");
    $provinceElements.each(function(index, domEle) {
        //获取省名 attr() 方法设置或返回被选元素的属性值
        var $provinceName = $(domEle).attr("name");
        //获取select元素 添加选项
        var $provinceElement = $("#province");
        $provinceElement.append("<option>" + $provinceName + "</option>");
    });
    //当下拉框的值发生改变 对应的城市下拉框的值也发生改变
    $("#province").change(function() {
        //val() 方法返回或设置被选元素的值 
        var $province = $(this).val();
        //移除市下拉选项
        $("#city option").remove();
        //遍历节点
        $provinceElements.each(function(index, domEle) {
            //获取省名
            var $provinceName = $(domEle).attr("name");
            //判断获取到的省名和下拉框选中的省名是否一致
            if ($province == $provinceName) {
                //获取城市节点
                var $cityName = $(domEle).find("city");
                //遍历城市
                $cityName.each(function(index, demle) {
                    var $cityValue = $(demle).attr("name"); //获取市名
                    //获取city下拉框 添加元素
                    var $cityElement = $("#city");
                    $cityElement.append("<option>" + $cityValue + "</option>");
                });
            }
        });
    });


});