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

Posted 2022-03-20 xiemin-minmin

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

jquery我用的是3.1的

 

前台页面

 1  <form action="buy.html" method="get">
 2         <div>
 3             <table>
 4                 <tr>
 5                     <td colspan="2" align="center">送货地址确认</td>
 6                 </tr>
 7                 <tr>
 8                     <td align="right">省份：</td>
 9                     <td>
10                         <select id="province">
11                             <option>请选择</option>
12                         </select>
13                     </td>
14                 </tr>
15                 <tr>
16                     <td align="right">市/区：</td>
17                     <td>
18                         <select id="city">
19                            <option>请选择</option>
20                         </select>
21                     </td>
22                 </tr>
23                 <tr>
24                     <td align="right">街道：</td>
25                     <td>
26                         <input type="text" name="txtStreet" class="street" />
27                     </td>
28                 </tr>
29                 <tr>
30                     <td align="right">门牌号：</td>
31                     <td><input type="text" name="txtHouseNum" class="street" /></td>
32                 </tr>
33                 <tr>
34                     <td colspan="2" align="center">
35                         <input type="submit" value="确认" />
36                     </td>
37                 </tr>
38             </table>
39         </div>
40     </form>

 

jquery代码

 1 //解析并加载xml文件
 2 $.get("xml/city.xml", function(xml) 
 3     //获得xml文件
 4     var docXml = xml;
 5     //使用find方法找到对应的节点元素 然后使用each方法遍历所有数据
 6     //$(selector).each(function(index,element))
 7     //index - 选择器的 index 位置 element - 当前的元素（ 也可使用 "this"选择器）
 8     var $provinceElements = $(docXml).find("province");
 9     $provinceElements.each(function(index, domEle) 
10         //获取省名 attr() 方法设置或返回被选元素的属性值
11         var $provinceName = $(domEle).attr("name");
12         //获取select元素 添加选项
13         var $provinceElement = $("#province");
14         $provinceElement.append("<option>" + $provinceName + "</option>");
15     );
16     //当下拉框的值发生改变 对应的城市下拉框的值也发生改变
17     $("#province").change(function() 
18         //val() 方法返回或设置被选元素的值 
19         var $province = $(this).val();
20         //移除市下拉选项
21         $("#city option").remove();
22         //遍历节点
23         $provinceElements.each(function(index, domEle) 
24             //获取省名
25             var $provinceName = $(domEle).attr("name");
26             //判断获取到的省名和下拉框选中的省名是否一致
27             if ($province == $provinceName) 
28                 //获取城市节点
29                 var $cityName = $(domEle).find("city");
30                 //遍历城市
31                 $cityName.each(function(index, demle) 
32                     var $cityValue = $(demle).attr("name"); //获取市名
33                     //获取city下拉框 添加元素
34                     var $cityElement = $("#city");
35                     $cityElement.append("<option>" + $cityValue + "</option>");
36                 );
37             
38         );
39     );
40 
41 
42 );