<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>级联效果</title>
<script language="javascript" type="text/javascript">
window.onload = function(){
document.getElementById("province").onchange = function(){
var changeProvinceValue = this.value;//获取省变化的值
var cityElement = document.getElementById("city");//清空下拉选项的值
var cityoptionElements = cityElement.getElementsByTagName("option");
for(var i=cityoptionElements.length -1 ;i >0;i--){
cityElement.removeChild(cityoptionElements[i]);
}
//测试xml是否加载成功
var xmldoc = parseXml("city.xml");
var provinceElement= null;
//定位到具体省
var xmlProvinceElements = xmldoc.getElementsByTagName("province");
for(var i=0;i<xmlProvinceElements.length;i++){
var xmlProvinceElement=xmlProvinceElements[i];
var nameAttribute =xmlProvinceElement.getAttribute("name");
if(changeProvinceValue == nameAttribute){
provinceElement = xmlProvinceElement;
break;
}
}
if(provinceElement != null){
var xmlCityElements=provinceElement.getElementsByTagName("city");
for(var i=0 ; i<xmlCityElements.length;i++){
var cityValue=xmlCityElements[i].firstChild.nodeValue;
var optionElement=document.createElement("option");
optionElement.setAttribute("value",cityValue);
var cityTextElement=document.createTextNode(cityValue);
optionElement.appendChild(cityTextElement); var cityElement=document.getElementById("city");
cityElement.appendChild(optionElement);
}
}
}
}
function parseXml(filename){
try{
xmldoc =new ActiveXObject("Microsoft.XMLDOM");
}
catch(e){
try{
xmldoc= document.implementation.createDocument("","",null);
}
catch(e){}
}
xmldoc.async = false;
xmldoc.load(filename);
return xmldoc;
}
</script>
</head> <body>
<select id="province" name="province">
<option value="">请选择</option>
<option value="吉林省">吉林省</option>
<option value="山东省">山东省</option>
<option value="辽宁省">辽宁省</option>
</select>
<select id="city" name="city">
<option value="">请选择</option>
</select>
</body> </html>

以下是xml文件(city.xml):

 <?xml version="1.0" encoding="GB2312"?>
<china>
<province name="吉林省">
<city>长春</city>
<city>松原</city>
<city>通化</city>
<city>四平</city>
</province>
<province name="辽宁省">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
</province>
<province name="山东省">
<city>威海</city>
<city>济南</city>
<city>青岛</city>
<city>烟台</city>
</province>
</china>

效果:

下拉选择山东,右边的下拉出现相对应的城市。

js实现“级联菜单”的更多相关文章

  1. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  2. JS实战 · 级联菜单选择省份和城市(两种)

    DOM编程步骤.思路 1.定义界面:      通过html标签将数据进行封装: 2.定义一些静态样式:      利用css: 3.需要动态地完成的和用户的交互:      a:明确事件源:     ...

  3. js实现级联菜单(没有后台)

    html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" o ...

  4. JS实现级联菜单

    是首先应该添加两个下拉列表并设置id属性来方便操作: <select id="country"> <option>国家</option> < ...

  5. js进阶 9-12 js如何实现级联菜单 (章节测试)

    js进阶 9-12  js如何实现级联菜单 (章节测试) 一.总结 一句话总结: 1.js如何实现级联菜单 ? 二维数组,以第一级菜单的文本值做键,以对应的二级菜单选项的文本做值 2.用哪个属性可以获 ...

  6. 前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...

  7. 使用json方式实现省市两级下拉级联菜单[原创]

    本文为博主原创,转载请注明. 首先看一下实现后的效果图: 当然,要完成这个实验,mysql必须与数据库连接,这里选用navicat for mysql这款软件,它与mysql的契合度是很高的,配置环境 ...

  8. Ajax实现动态的二级级联菜单

    今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...

  9. js省市级联实现

    js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...

随机推荐

  1. 一篇入门Node.js

    目录 1.Node.js 简介 2.Node.js NPM 3.Node.js 模块 4.Node.js 事件 5.Node.js Buffer 6.Node.js 文件系统 7.Node.js St ...

  2. java后台处理解析json字符串的两种方式

    简单说一下背景 上次后端通过模拟http请求百度地图接口,得到的是一个json字符串,而我只需要其中的某个key对应的value. 当时我是通过截取字符串取的,后来觉得不太合理,今天整理出了两种处理解 ...

  3. noip2013 Day2 T2 花匠 解题报告

    题目: 3289 花匠 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大, ...

  4. SRPING MVC基本配置

    作下记录,WEB.XML的配置及DispatcherServlet-context.xml的配置. 而后者的配置,有不同的形式,不要被迷惑. WEB.XML <servlet> <s ...

  5. [bzoj1935][Shoi2007]Tree 园丁的烦恼 _树状数组

    Tree 园丁的烦恼 bzoj-1935 Shoi-2007 题目大意:给定平面上的$n$个点,$m$次查询矩形点个数. 注释:$1\le n,m\le 5\cdot 10^5$. 想法:静态二维数点 ...

  6. BZOJ——T 1800: [Ahoi2009]fly 飞行棋

    Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1767  Solved: 1395[Submit][Status][Discuss] Descripti ...

  7. Skia图片解码模块流程分析

    我在在PPAPI插件中使用Skia画图中说能够在PPAPI插件内使用Skia来画图.这里面会有一个与色彩空间(像素格式)相关的问题.在那篇文章里我们在PPAPI中使用PPB_ImageData创建2D ...

  8. 以&quot;小刀会“的成败论当今创业成败

    讲起"小刀会",熟悉的人或许非常熟悉,不熟悉的人或许根本不知道清末有这样一个组织. 依据翻查史料,最初的小刀会是在福建成立的,来源有两个.一个是天地会的分支,一个是白莲教分支. 而 ...

  9. Android开发之WebView的开发使用(源码分享)

    假设我们想提供一个web应用程序(或仅仅是一个网页)作为client应用程序的一部分,我们能够使用WebView.WebView类是Android的视图类的扩展,它同意您显示web页面的一部分活动布局 ...

  10. nginx启动访问

    修改配置文件后,查看配置是否ok 以下是有错误的 以下是ok的 nginx/sbin/nginx -t 启动查询: /usr/local/nginx/sbin/nginx -c /usr/local/ ...