多级联动系列——ajax调用XML实现三级联动
2014-05-18 19:00
555 查看
ajax 使用起来特别的方便,再也不担心浏览器兼容问题了。用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧。
首先写一个XML文件。data.xml
<?xml version="1.0" encoding="UTF-8"?> <list> <province name="河南" id='1'> <city name="焦作" id='11'> <area id='111'>武陟</area> <area id='112'>博爱</area> <area id='113'>修武</area> </city> <city name="郑州" id='12'> <area id='121'>金水区</area> <area id='122'>二七区</area> <area id='123'>中原区</area> </city> </province> <province name="河北" id='2'> <city name="石家庄" id='21'> <area id='211'>赵县</area> <area id='212'>正定</area> <area id='213'>平山</area> </city> <city name="承德" id='22'> <area id='221'>围场</area> <area id='222'>丰宁</area> <area id='223'>隆化</area> </city> </province> <province name="山东" id='3'> <city name="青岛" id='31'> <area id='311'>李沧</area> <area id='312'>崂山</area> <area id='313'>黄岛</area> </city> <city name="日照" id='32'> <area id='321'>东港</area> <area id='322'>岚山</area> <area id='323'>五莲</area> </city> </province> </list>
然后就要用ajax调用XML 生成三级联动 了
下面是代码部分
<!DOCTYPE html> <html> <head> <title>八部天龙</title> <meata http-equiv="contetn-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="./jquery/jquery.js"></script> <script type="text/javascript"> var xnlOb; $(document).ready(function(){ $.get("data.xml",null,funciton(re){ xmlOb=$(re);//把文档对象转化为选择器对象 //开始获取所有的province标签 var pOb=xmlOb.find("province"); var pName,pId; $("[name='province']").append("<option value='0'>请选择</option>"); pOb.each(function(){ pName=$(this).attr('name'); //alert(pName); pId=$(this).attr('id'); $("[name='province']").append("<option value='"+pId+"'>"+pName+"</option>"); }) },'xml'); }) function getCity(){ //首先获取选择的省份的名字 一级分类中 var pValue=$("[name='province']>:selected").text(); $("[name='city']").empty();//清空是为了防止多选几次出现的多次添加重复内容 $("[name='city']").append("<option value='0'>请选择</option>"); //然后接着找省下的城市 xmlOb.find("province[name='"+pValue+"']").find("city").each(function(){ $("[name='city']").append("<option value='"+$(this).attr('id')+"'>"+$(this).attr('name')+"</option>"); }); } function getArea(){ var cValue=$("[name='city']>:selected").text(); $("[name='area']").empty(); $("[name='area']").append("<option value='0'>请选择</option>"); //接着去XML中找市下面的县(区) xnlOb.find("city[name='"+cValue+"']").find('area').each(function(){ $("[name='area']").append("<option value='"+$(this).attr('id')+"'>"+$(this).text()+"</option>"); }); } </script> <body> <select name="province" onchange="getCity();"></select> <select name="city" onchange="getArea();"></select> <select name="area"></select> </body> </head> </html>
OK,就是这样的。根据这个三级联动,可以扩展N级联动。原理都是一样的。好了,就到这里了。
相关文章推荐
- 多级联动系列——ajax调用XML实现三级联动
- 【笔记】Ajax+ChinaArea.xml实现三级联动
- Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
- Jquery+Ajax+XML实现国家、省、市的三级联动
- 由ajax,js,xml,php实现的三级联动省市县下拉功能
- asp.net(c#)用Ajax调用web 服务实现省市县三级联动
- 通过AJAX调用页面后台代码方法实现省级三级联动效果 (简单练习)前台
- Jquery+Ajax+XML实现国家、省、市的三级联动
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- js+xml实现三级联动菜单
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- 用ajax实现dropdownlist多级联动实例
- 轻松实现无刷新三级联动菜单[VS2005和AjaxPro] (转)
- 用Ajax.net实现的一个无刷新的多级联动下拉列表框
- ajax实现省市三级联动
- php ajax实现的二级(多级)联动菜单(2008-10-21,11:36:08)
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用
- 用XML实现三级联动下拉列表框
- 轻松实现无刷新三级联动菜单[VS2005和AjaxPro] (转)
- Ajax实现三级联动下拉框