最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台。

平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动或者省市县三级等,一般这样的数据会有一张单独的数据表,

需要用的话,通过查询数据库获得相应的数据,返回一个JSNO,在前台进行处理显示。

但是这个功能没有单独的表,总共七个一级菜单,每个一级菜单下对应N个二级菜单,考虑到数据量不大,没有必要去改变原有的数据库表结构,就想到了用简单的JS去实现这个需求。

废话不多话,代码如下:

jsp部分代码:

<form action="" name="form1">
<select name="province" id="province" onChange="getChild()">
<option>== 请选择省份 ==</option>
<option>北京市</option>
<option>山西省</option>
<option>山东省</option>
<option>河北省</option>
<option>河南省</option>
</select> <select name="city" class="city">
<option>== 请选择市区 ==</option>
</select>
</form>

JS代码:

<script type="text/javascript">
//二级联动
//定义城市数组
var ctiyList = [
["东城区","西城区","朝阳区","丰台区","海淀区","昌平区"],
["太原市","大同市","运城市","临汾市","忻州市","晋中市"],
["济南市","青岛市","威海市","烟台市","临沂市","德州市"],
["石家庄市","邢台市","保定市"],
["郑州市","焦作市","三门峡市"],
];
//点击选择框触发得到方法
function getChild(){
var sltProvince = document.form1.province;//获取name为form1下province
var sltCity = document.form1.city;//获取name为form1下city
var pc=ctiyList[sltProvince.selectedIndex - 1]; //省份列表下标要和城市列表下标一致
sltCity.length=1;//每次选择都清空城市列表
//遍历根据省份下标与之对应的城市下标
for(var i=0;i<pc.length;i++){
sltCity[i+1]=new Option(pc[i],pc[i]);
}
}
</script>

省市联动_简单的Demo,适用于各种二级菜单联动的更多相关文章

  1. JavaScript(jquery)实现二级菜单联动

    为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...

  2. Ajax和JSON完成二级菜单联动的功能

    首先需要找好JSON的包哦: 链接:http://pan.baidu.com/s/1jH6gN46 密码:lbh1 1:首先创建一个前台页面,比如secondMenu.jsp,源码如下所示: < ...

  3. Excel实现二级菜单联动

    项目中需要导入一个Excel模板需要实现二级联动,现记录如下: 首先看一下原始数据,原始信息在一张工作表,第一行是省市名称,下面的若干行为对应省市下面的地名和区名.需要在另外一张工作表中A列和B列建立 ...

  4. Struts2二级菜单联动

    http://www.cnblogs.com/wujixing/p/5194461.html ps: Java面试 http://blog.csdn.net/zhang070809/article/d ...

  5. ecshop简单三部实现导航分类二级菜单

    1.在page_header.lbi对应的位置(你想显示导航的位置)插入 (注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件 ...

  6. juqery easy ui 实现二级菜单联动

    实现效果 代码: <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat= ...

  7. C#可扩展编程之MEF学习笔记(一):MEF简介及简单的Demo

    在文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门致力于解决扩展性问题的框架 ...

  8. Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(二)

    然后是项目下的文件:完整的项目请看  上一篇 Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(一) 项目下的springmvc-servlet.xml配置文件: ...

  9. MEF简介及简单的Demo

    MEF简介及简单的Demo 文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门 ...

随机推荐

  1. TextField和TextView

    本文概要 1.简介 2.介绍TextField控件 3.介绍TextView控件 4.键盘的打开和关闭 5.关闭和大开键盘的通知 6.键盘的种类 详情 1.简介 与Label一样,TextField和 ...

  2. "!function",自执行函数表达式

    如题为自执行函数表达式.在这种情况下,解析器在解析function关键字的时候,会将相应的代码解析成function表达式,而不是function声明.下面2个括弧()都会立即执行 (function ...

  3. c++设计成员变量可动态调整的动态类结构

    本文主要介绍一下如何使用c++设计成员变量可动态调整的抽象动态类结构.首先介绍一下项目中以前使用的一种类结构:静态类结构 1.静态类结构 很多时候,在项目开发中设计类结构时,我们往往有一种简单.直接的 ...

  4. HTML5基础学习

    分享一下html5的一些基础,小白上路! 一.html5基本结构 <!DOCTYPE html> ↑声明文档类型为HTML5文件. 文档声明,在HTML文档必不可少.且必须放在文档第一行 ...

  5. 六行python代码的爱心曲线

    前些日子在做绩效体系的时候,遇到了一件囧事,居然忘记怎样在Excel上拟合正态分布了,尽管在第二天重新拾起了Excel中那几个常见的函数和图像的做法,还是十分的惭愧.实际上,当时有效偏颇了,忽略了问题 ...

  6. linux网口绑定笔记-bind

    模式0:balance-rr 模式1:active-backup 模式2:balance-xor 模式3:broadcast 模式4:802.3ad 模式5:balance-tlb 模式6:balan ...

  7. .NET产品源码保护,.NET防止反编译,c#/vb.net 防反编译

    .NET产品源码保护产生的背景: .NET源码加密方案支持C#及VB.NET等语言开发的ASP.NET及WINFORM应用.利用.NET支持托管代码与非托管代码共存的特性,将C#代码经过处理放于非托管 ...

  8. 简单的留言板(dom+正则练习)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 计算机程序的思维逻辑 (82) - 理解ThreadLocal

    本节,我们来探讨一个特殊的概念,线程本地变量,在Java中的实现是类ThreadLocal,它是什么?有什么用?实现原理是什么?让我们接下来逐步探讨. 基本概念和用法 线程本地变量是说,每个线程都有同 ...

  10. bzoj4828 [Hnoi2017]大佬

    Description 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语.你作为一个OIER,面对这样的事情非常 ...