js 读取 xml 的城市级联

最新推荐文章于 2019-12-23 10:36:43 发布
最新推荐文章于 2019-12-23 10:36:43 发布
阅读量101 收藏
点赞数
分类专栏： js 文章标签： XML Microsoft Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangyang1986/article/details/83674885
版权
朋友让我写了一个用js和xml的级联 修改时显示已经选择的城市。做了一个指定参数的级联。页面js如下 ：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>New Web Project</title>
<script type="text/javascript" src="js/PCA_modify.js">
</script>
<script language="JavaScript">
function AddProvince1(pid, cid, aid){
xmldoc = new ActiveXObject("microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("js/PCAXml.xml");
var ProvinceNodes = xmldoc.documentElement.selectNodes("Province");//documentElement可以返回文档的根节点
for (var i = 0; i < ProvinceNodes.length; i++) {//循环所有的省
document.getElementById("province").options.add(new Option(ProvinceNodes[i].getAttribute("name"), ProvinceNodes[i].getAttribute("id")));
if (ProvinceNodes[i].getAttribute("id") == pid) {//选中已经选定的省
document.getElementById("province").options[i].selected = true;
};
};

var CityNodes = xmldoc.documentElement.selectNodes("Province[@id='" + pid + "']/City"); //获得已经选定省份下的所有市
for (var i = 0; i < CityNodes.length; i++) {
document.getElementById("city").options.add(new Option(CityNodes[i].getAttribute("name"), CityNodes[i].getAttribute("id")));
if (CityNodes[i].getAttribute("id") == cid) {//选中已经选定的市
document.getElementById("city").options[i].selected = true;
};
};

var AreaNodes = xmldoc.documentElement.selectNodes("Province/City[@id='" + cid + "']/Area");
alert(AreaNodes.length);
for (var i = 0; i < AreaNodes.length; i++) {
document.getElementById("area").options.add(new Option(AreaNodes[i].text, AreaNodes[i].getAttribute("id")));
if (AreaNodes[i].getAttribute("id") == aid) {//选中已经选定的区
document.getElementById("area").options[i].selected = true;
};
};
};
</script>
</head>
<body οnlοad="AddProvince1('03','0302','030204');">
省
<select id="province" name="province" class="text70" οnclick="AddCity(this.value)">
</select>
<br>
市
<select id="city" name="city" class="text70" οnclick="AddArea(this.value)">
</select>
<br>
区
<select id="area" class="text40" name="area">
</select>
<br>
</body>
</html>
jiangyang1986
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML的省市联动例子
PC_small_wang的博客
12-03 458
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省市联动</title> </head> <body> <! -创建主体部分默认两个select-> <tr a...
JS实现三级联动
热门推荐
脱耦的博客
08-16 1万+
通过数组简单实现三级联动。代码如下图所示：  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="../
js的省市联动案例
我们仨
05-21 265
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市联动案例</title> </head> <body> <!-- 当我们选取下拉列表某一项时，就会执行onchange事件 --> &l...
js，城市三级联动
曳猫的博客
12-23 228
HTML <select id="province" onchange="addcity(this.value)"> <option value="-1">选择省</option> </select> <select id="city" onchange="addcountry(this.value)"> <option val...
JS中的DOM操作
仙女的博客
11-01 177
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。 DOM 以树结构表达 HTML 文档。 HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。 DOM操作： Document：整个html文件都成为一个...
javascript读取Xml文件做一个二级联动菜单示例
12-04
代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD ... <head> <title>.../title>... [removed] function loadXML(){ var xmlDoc; try{ //IE xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”
JavaScript网页特效范例宝典源码
09-04
实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉菜单的值显示不同控件 112 实例069 分级下拉列表 113 2.3 单选按钮组 114 实例070 不提交表单获取单选按钮的值 114 实例071 选中单选...
jquery+json 通用三级联动下拉列表
12-02
chrome不支持，有兴趣的可以将读取XML的部分改成AJAX的方式，这样chrome支持就不成问题 第二个是采用Json数据格式构建，是我的第二次尝试改进 第三个与第二个其实是一样的，只不过将数据分离到JS文件中，我的代码中...
js实现省市联动
NULL_YM
09-25 717
js实现省市联动 <!doctype html> <html lang="en"> <head> <title>省市·联动</title> <style type="text/css"> .mydiv{ <!-- 存放或引用css样式代码，这里对样式不作要求 --> } </style&g...
JS 读取XML设置级联菜单
可口可乐的博客
08-26 569
cities.html [html] view plaincopy >   html>   head>   meta http-equiv="Content-Type" content="text/html; charset=gb2312">   title>Untitled Documenttitle>   script type="text
Js解析xml文件并简单实现省市区级联菜单(并解决各浏览器兼容性问题).
可口可乐的博客
08-27 1210
转载地址：http://blog.csdn.net/redarmy_chen/article/details/6520693 首先我们采用是DOM （Document Object Model，文档对象模型）定义了访问和操作文档的标准方法。这里我们使用到了HTML DOM与XML DOM  1、XML DOM  XML DOM (XML Document Object Mod
根据XML 用JS做级联操作
PasiOn_HeaArt的专栏
03-21 2434
<br />XML文件：<br /> <?xml version="1.0" encoding="utf-8"?> <cities> <province name="北京"> <city>大兴</city> <city>昌平</city> <city>朝阳</city> <city>海淀</city> <city>东城</city> <city>西城</city> </province> <province name="河北"> <city>石家庄</
JS加载和读取XML文件
mhkzhaocd的博客
05-27 9927
var xmlFileName="01File.xml"; var xmlDoc = ''; if (window.ActiveXObject){ // IE var activeXNameList = new Array("MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.D...
JS实现从XML中获取省份和城市信息_二级联动
执念的博客
07-12 1010
//工具util.js实现，固定代码function loadXMLDoc(dname) { try // Internet Explorer { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { try // Firefox, Mozilla, Opera, etc. { xmlDoc = docu
JavaScript 和 jquery
zengshangchun的博客
01-03 298
onchange事件：当改变下垃列表选项时执行 add()方法：向下垃列表中添加一个选项 options[]属性：返回包含下垃列表中的所有选项的一个数组 selectedIndex属性：设置或返回下垃列表中被选中项的索引号 &lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt; &lt;%@page isEL...
JS实现省市级联
今天很快乐呀
09-03 1万+
现居住地： &lt;select id="selProvince" onchange="changeCity( )" style="width:100px"&gt; &lt;option&gt;--选择省份--&lt;/option&gt; &lt;/select&gt; &lt;select id="selCity" style=&qu
infrared-remote-candroid studiodemo
最新发布
05-05
android studio下载
elementui城市级联选择器
09-15
ElementUI 中的城市级联选择器是一个非常常用的组件，可以帮助用户在一个区域选择省、市和区县。要使用城市级联选择器，你需要按照以下步骤进行设置： 1. 安装 ElementUI：首先确保你已经安装了 ElementUI，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值