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>");
                 });
             }
         });
     });

 });