ajax基于xpath的三级联动
来源:互联网 发布:windows系统日志备份 编辑:程序博客网 时间:2024/05/17 05:10
(function(){
var docxml;
var province;
var city;
var country;
window.onload=function(){
//异步问题注意
initDoc();
province=document.getElementById("province");
province.onchange=getCity;
city=document.getElementById("city");
city.onchange=getCountry;
}
function getCountry(){
var xpath="/address/province/city[@value="+this.value+"]/country";
var cs=getData(xpath);
country.options.length=1;
for(var i=0;i<cs.length;i++){
var node=document.createElement("option");
node.text=cs[i].getAttribute("name");
node.value=cs[i].getAttribute("value");
country.add(node);
}
}
function getCity(){
var xPath="/address/province[@value='"+this.value+"']/city";
var cs=getData(xPath);
city=document.getElementById("city");
country=document.getElementById("country");
//每次改变就把cn变为1;
city.options.length=1;
country.options.length=1;
for(var i=0;i<cs.length;i++){
//创建节点元素
var node = document.createElement("option");
//内容显示
node.text = cs[i].getAttribute("name");
//value显示
node.value = cs[i].getAttribute("value");
//增加在下面html想要的位置
city.add(node);
}
}
function initProvince(){
var xpath="/address/province";
var provinces=getData(xpath);
province=document.getElementById("province");
for(var i=0;i<provinces.length;i++){
var node=document.createElement("option");
node.text=provinces[i].getAttribute("name");
node.value=provinces[i].getAttribute("value");
province.add(node);
}
}
function getData(xpath){
if(window.ActiveXObject){
return docxml.selectNodes(xpath);
}else{
var as=new Array();
//找docxml中的数据
var xh=docxml.evaluate(xpath,docxml,null
,XPathResult.UNORDERED_NODE_ITERATOR_TYPE
,null);
var node;
while(node=xh.iterateNext()){
as.push(node);
}
}
return as;
}
function initDoc(){
var xhr=CreateXmlHttpServlet();
xhr.open("POST","Area.xml",true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
docxml=xhr.responseXML;
initProvince();
}
}
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send();
}
function CreateXmlHttpServlet(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
})();
var docxml;
var province;
var city;
var country;
window.onload=function(){
//异步问题注意
initDoc();
province=document.getElementById("province");
province.onchange=getCity;
city=document.getElementById("city");
city.onchange=getCountry;
}
function getCountry(){
var xpath="/address/province/city[@value="+this.value+"]/country";
var cs=getData(xpath);
country.options.length=1;
for(var i=0;i<cs.length;i++){
var node=document.createElement("option");
node.text=cs[i].getAttribute("name");
node.value=cs[i].getAttribute("value");
country.add(node);
}
}
function getCity(){
var xPath="/address/province[@value='"+this.value+"']/city";
var cs=getData(xPath);
city=document.getElementById("city");
country=document.getElementById("country");
//每次改变就把cn变为1;
city.options.length=1;
country.options.length=1;
for(var i=0;i<cs.length;i++){
//创建节点元素
var node = document.createElement("option");
//内容显示
node.text = cs[i].getAttribute("name");
//value显示
node.value = cs[i].getAttribute("value");
//增加在下面html想要的位置
city.add(node);
}
}
function initProvince(){
var xpath="/address/province";
var provinces=getData(xpath);
province=document.getElementById("province");
for(var i=0;i<provinces.length;i++){
var node=document.createElement("option");
node.text=provinces[i].getAttribute("name");
node.value=provinces[i].getAttribute("value");
province.add(node);
}
}
function getData(xpath){
if(window.ActiveXObject){
return docxml.selectNodes(xpath);
}else{
var as=new Array();
//找docxml中的数据
var xh=docxml.evaluate(xpath,docxml,null
,XPathResult.UNORDERED_NODE_ITERATOR_TYPE
,null);
var node;
while(node=xh.iterateNext()){
as.push(node);
}
}
return as;
}
function initDoc(){
var xhr=CreateXmlHttpServlet();
xhr.open("POST","Area.xml",true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
docxml=xhr.responseXML;
initProvince();
}
}
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send();
}
function CreateXmlHttpServlet(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
})();
阅读全文
0 0
- ajax基于xpath的三级联动
- 基于Ajax的无刷新三级联动
- 基于Java的ajax城市三级联动
- 基于ThinkPHP+AJAX的省市区三级联动
- 基于MVC的三级联动
- ajax版的 精简的三级联动
- 我用Ajax写的三级联动
- 使用ajax写的省市区三级联动
- ajax无刷新的三级联动
- Ajax实现简易的三级联动
- Ajax制作的下拉列表三级联动
- jQuery下的ajax 三级联动
- 地址联动(基于xpath的实现)
- 基于BootStrap 的城市三级联动。
- 基于Vue的三级联动下拉框
- 基于jQuery的三级联动控件
- 基于layui的三级联动模块
- ajax做三级联动
- CentOS配置MySQL基于日志点的复制Binary Log File Position Based Replication
- 使用SVN auto commit命令将本地文件同步到服务器
- Java 提高(3)----- 类
- 【C语言】【unix c】如何改变信号的处理方式
- Anaconda3 安装后python版本更新
- ajax基于xpath的三级联动
- ACM_51nod_1109_01组成的N的倍数
- android学习---SQLite数据库存储
- “该公众号提供的服务出现故障,请稍后再试”
- Java(Graphics2D)简单绘图
- 神一样的博客
- MySQL: Unable to establish SSL connection.
- Spring-Javaconfig-Mybatis-JNDI连接mysql配置
- shell四剑客之find