所有代码都是在写在JS中。首先,解析XML 、然后把XML中的内容放进页面中的select选项里。
XML文件:
<?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>石家庄</city>
<city>保定</city>
<city>邢台</city>
<city>张家口</city>
<city>廊坊</city>
<city>承德</city>
</province>
<province name="河南">
<city>郑州</city>
<city>安阳</city>
<city>平顶山</city>
<city>开封</city>
<city>商丘</city>
<city>洛阳</city>
</province>
<province name="东北">
<city>哈尔滨</city>
<city>辽宁</city>
<city>吉林</city>
<city>大连</city>
<city>铁岭</city>
<city>仕新</city>
</province>
</cities>
页面:
<body>
<h1>解析xml文件实现省市级联下拉菜单</h1>
<div>
<span>
<select id="province" name="province">
<option>请选择省</option>
</select>
</span>
<span>
<select id="cities" name="city">
<option>请选择相应省下面的市</option>
</select>
</span>
</div>
</body>
JS:
<script type="text/javascript">
window.onload = function(){
var xmlDom;
try {
//针对的是IE浏览器 创建一个空的微软 XML 文档对象
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
}
catch (err) {
try {
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);
}
catch (e) {
}
}
//关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.async = "false";
//解析器加载名为 "xxx.xml" 的 XML 文档、
xmlDom.load("city.xml");
//获取xml文件的根节点
var root = xmlDom.documentElement;
//获取根节点下面的省节点
var provinces = root.childNodes;
var province = document.getElementById("province");
for (var i = 0; i < provinces.length; i++) {
//获取省节点的name属性的值
var name = provinces[i].getAttribute("name");
//创建一个option
var opt = document.createElement("option");
//为option添加文本
opt.appendChild(document.createTextNode(name));
//添加到父节点中
province.appendChild(opt);
}
var cities = document.getElementById("cities");
province.onchange = function(){
var pce = document.getElementById("province");
var opts = pce.options;
//根据下标获取选中的OPTION
var opt1 = opts[pce.selectedIndex];
var name = opt1.innerHTML;
for (var i = 0; i < provinces.length; i++) {
//获取省节点的name属性的值
var name1 = provinces[i].getAttribute("name");
if (name == name1) {
cities.length = 1;//每次改变的时候清空
var pros = provinces[i];
var citys = pros.childNodes;
for (var j = 0; j < citys.length; j++) {
//创建一个option
var opt = document.createElement("option");
//为option添加文本
opt.appendChild(document.createTextNode(citys[j].text));
//添加到父节点中
cities.appendChild(opt);
}
}
}
}
}
</script>
效果图:
分享到:
相关推荐
以XML文件作级联数据源,采用树形控件显示,节点可选择Radiobutton,CheckBox,PlainText等类型。
NULL 博文链接:https://linshiquan.iteye.com/blog/292755
js+xml生成级联下拉框代码.docx
java js 城市级联菜单xml和sql版.rar
NULL 博文链接:https://linshiquan.iteye.com/blog/292605
JS+XML省市区三级级联控件,可任意选中,调用简单,调用如下: 选中区级 前面默认选中 initCity('province','city','district','dist: '+487); 选中市级 initCity('province2','city2','district2','city: '+295); ...
比较全面的js+xml省市县三级级联js控件 ,和大家分享下
省市区(县)级联.用的是JS+xml实现的省市区县级联。 全国的各地的都有.很实用的!标准的JS脚本. 省市区(县)级联.用的是JS+xml实现的省市区县级联。 全国的各地的都有.很实用的!标准的JS脚本.
NULL 博文链接:https://jiangyang1986.iteye.com/blog/721327
使用jquery实现的仿人人网高校级联选择,但无国家选择,学校数据保存在JS中,可自行拓展至xml文件或者数据库中!已在主流浏览器中测试!
该作者独到的思维见解,以及那通俗易懂的代码,非常适合初学者学习,以及对于有基础的朋友一些思维拓展是非常有帮助的!
该项目为一个整合hibernate与struts,利用json对象存放临时数据库数据,连接数据的三级...Struts.xml:主要亮点在配置一个多变级联时防止加载多个表的操作,从而达到解决多表级联操作的时候经常出现的session已关闭的bug
关于级联的一个小例子 用xml文件做为数据的存取 希望对大家有用哦
1.创建测试XML文件:select.xml 代码如下:<?xml version=”1.0″ encoding=”GBK”?> <select> ”sx”> 陕西 ”xa”>西安</city> ”bj”>宝鸡</city> ”ak”>安康</city> </province> ”js”> 江苏 ”nj...
城市数据单独存在xml文件中,执行效率高。 初始化时可自动选择指定城市,示例: //初始化下拉菜单 InitCityList(); //自动选择默认地区 AutoSelect('福建省','龙岩市','新罗区'); </script>
不刷新,并且数据全放在xml里。使用非常方便
利用xml和js做的省市区级联,将最后所得值返回 注:readme里面最后一句话意思写错。 应该是:将自定义控件的AcceptControlID设置为要接收该返回值的文本框的ID。另外,运雄后可能级联没能及时出来,你在文本框里面...