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



html代码:
<!-- js级联菜单 -->
<div id="cascMenu">
<select id="select" onchange="getLocal(this.selectedIndex)">
<option>请选择</option><!-- selectedIndex=0 -->
<option>北京</option><!-- selectedIndex=1 -->
<option>上海</option>
<option>广州</option>
</select>
<select id="selectInfo">
<option>请选择</option>
</select>
<div>
js代码:
function getLocal(selectIndex){
var arr=new Array();
arr[0]=[new Option("请选择","1")];
arr[1]=[new Option("东城区","1"),new Option("西城区","2"),new Option("朝阳区","3")];
arr[2]=[new Option("黄埔区","1"),new Option("其他区","2")];
arr[3]=[new Option("海珠区","1"),new Option("天河区","2"),new Option("白云区","3"),new Option("黄浦区","3")];
var selectInfo=document.getElementById("selectInfo");
selectInfo.innerHTML="";
//为子下拉列表添加内容
for(var i=0;i<arr[selectIndex].length;i++){
selectInfo.options[i]=arr[selectIndex][i];
}
}
js实现级联菜单(没有后台)的更多相关文章
- JS动态级联菜单
JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...
- JS实战 · 级联菜单选择省份和城市(两种)
DOM编程步骤.思路 1.定义界面: 通过html标签将数据进行封装: 2.定义一些静态样式: 利用css: 3.需要动态地完成的和用户的交互: a:明确事件源: ...
- JS实现级联菜单
是首先应该添加两个下拉列表并设置id属性来方便操作: <select id="country"> <option>国家</option> < ...
- js实现“级联菜单”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js进阶 9-12 js如何实现级联菜单 (章节测试)
js进阶 9-12 js如何实现级联菜单 (章节测试) 一.总结 一句话总结: 1.js如何实现级联菜单 ? 二维数组,以第一级菜单的文本值做键,以对应的二级菜单选项的文本做值 2.用哪个属性可以获 ...
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...
- 使用json方式实现省市两级下拉级联菜单[原创]
本文为博主原创,转载请注明. 首先看一下实现后的效果图: 当然,要完成这个实验,mysql必须与数据库连接,这里选用navicat for mysql这款软件,它与mysql的契合度是很高的,配置环境 ...
- Ajax实现动态的二级级联菜单
今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...
- js省市级联实现
js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...
随机推荐
- JDK之ThreadLocal分析
ThreadLocal是在是Thread的一个局部变量,今天我来分析了一下这个类 先看ThreadLocal的set方法 public void set(T value) { Thread t = T ...
- java笔记十:java中的反射
Java中,反射是一种强大的工具.它使您能够创建灵活的代码,这些代码可以在运行时装配,无需在组件之间进行源代表链接.反射允许我们在编写与执行时,使我们的程序代码能够接入装载到JVM中的类的内部信息,而 ...
- splay tree成段更新,成段查询poj3466
线段树入门题,换成splay tree 来搞搞. #include <stdio.h> #include <string.h> #include <algorithm&g ...
- Grafana-----Singlestat Panel
singlestat面板允许你显示a SINGLE series的主要的汇总统计的一系列.它将series 简化为单个数(通过查看序列中的最大值.最小值.平均值或总和).singlestat还提供阈值 ...
- 前端基础 & 初识HTML
WEB 服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bin ...
- 流畅的python python 序列
内置序列 容器类型 list .tuple和collections.deque这些序列能放入不同的类型的数据 扁平序列 str.byets.bytearray.memoryview(内存视图)和arr ...
- 我的Android进阶之旅------>Android使用cmd窗口进行adb logcat时出现中文乱码问题的解决办法
今天用CMD命令进行adb logcat时显示一堆的乱码,乱码如下: C:\Users\Administrator>adb logcat -s logcat --------- beginnin ...
- JDK版本更改,修改环境变量不生效解决办法
问题: 当使用安装版本JDK后,想要更改系统环境变量时,直接更改JAVA_HOME无效. 原因: 当使用安装版本的JDK程序时(一般是1.7版本以上),在安装结束后安装程序会自动将java.exe.j ...
- ajax跨域资源共享
一.同域发送数据 略 二.跨域发送数据 1.存在的问题 1.什么是同源策略 同源策略阻止从一个域名上加载的脚本获取或操作另一个域名上的文档属性.也就是说,受到请求的 URL 的域名必须与当前 Web ...
- jmeter 监控插件JMeterPlugins&PerfMon安装
下载地址:http://jmeter-plugins.org/downloads/all/ PerfMon: 用来监控Server的CPU.I/O.Memory等情况 ServerAgent-2.2. ...