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>");
});
}
});
}); });
jquery解析XML文件实现的省市联动的更多相关文章
- JQuery -- Jquery 中的Ajax, Jquery解析xml文件
1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...
- jquery解析XML(1)
jquery解析XML文件 html代码 <!DOCTYPE html><html><head><title>解析XML</title>&l ...
- jQuery ajax解析xml文件demo
解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...
- 160928、JQuery解析XML数据的demo
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...
- JQuery解析XML数据的几个例子
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script ty ...
- 160708、JQuery解析XML数据的demo
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...
- 几个JQuery解析XML的程序例子
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script ty ...
- Android 解析XML文件和生成XML文件
解析XML文件 public static void initXML(Context context) { //can't create in /data/media/0 because permis ...
- JAVA使用SAX解析XML文件
在我的另一篇文章(http://www.cnblogs.com/anivia/p/5849712.html)中,通过一个例子介绍了使用DOM来解析XML文件,那么本篇文章通过相同的XML文件介绍如何使 ...
随机推荐
- Vuejs实战项目四:权限校验
路由跳转参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 在/src下创建permission.js进行权限 ...
- python利用paramiko执行服务器命令
话不多说直接上代码 封装连接 @staticmethod def connect(ip, server_user, server_port, server_path): ""&qu ...
- 基于PHP的一种Cache回调与自动触发技术
$s = microtime(true); for($i=0; $iaaa($array, $array, $array); $data = a::bbb($array, $array, $array ...
- Web前端浏览器兼容性个人经验总结
前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后 ...
- Spring MVC 搭建web项目示例
环境为Eclipse 1:新建Dynamic web project : springMvcDemo 2:下载spring的jar包,把jar包复制到WEB-INF/lib目录下 3.添加配置文件w ...
- IO 性能 $ iostat -kx 2$ vmstat 2 10$ mpstat 2 10$ dstat --top-io --top-bio
这些命令对于调试后端性能非常有用. 检查磁盘使用量:服务器硬盘是否已满? 是否开启了swap交换模式 (si/so)? CPU被谁占用:系统进程? 用户进程? 虚拟机? dstat 是我的最爱.用 ...
- linux设置变量的三种方法
1在/etc/profile文件中添加变量对所有用户生效(永久的) 用VI在文件/etc/profile文件中增加变量,该变量将会对Linux下所有用户有效,并且是“永久生效”. 例如:编辑/etc/ ...
- Leetcode598.Range Addition II范围求和2
给定一个初始元素全部为 0,大小为 m*n 的矩阵 M 以及在 M 上的一系列更新操作. 操作用二维数组表示,其中的每个操作用一个含有两个正整数 a 和 b 的数组表示,含义是将所有符合 0 < ...
- 2019阿里云开年Hi购季云通信分会场全攻略!
2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...
- Django 用 userena 做用户注册验证登陆
django-admin startproject userena2 cd userena2python manage.py startapp accounts vim userena2/settin ...