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 ...
随机推荐
- 怎样利用JDBC启动Oracle 自己主动追踪(auto trace)
有时我们须要对运行SQL的详细运行过程做一个追踪分析,特别是在应用程序性能优化的时候.Oracle两个工具能够帮助我们做好性能分析,一个是SQL_TRACE,一个是SESSION_EVENT.SQL_ ...
- 标准模板库--STL
标准模板库STL 1.泛型程序设计 C++ 语言的核心优势之一就是便于软件的重用 C++中有两个方面体现重用: 1.面向对象的思想:继承和多态,标准类库 2.泛型程序设计(generic progra ...
- Linux I/O 进阶
非阻塞I/O 阻塞I/O对应于低速的系统调用,可能会使进程永远阻塞.非阻塞I/O可以使我们发出open.read.write这样的I/O操作,并使这些操作不会永远阻塞.如果这种操作不能完成,则调用立即 ...
- 1060 最复杂的数(反素数玄学dfs)
1060 最复杂的数 题目来源: Ural 1748 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 把一个数的约数个数定义为该数的复杂程度,给出一个n,求1-n中 ...
- outlook撤回已发送邮件
官方教程参考: https://support.office.com/zh-cn/article/%E5%8F%91%E9%80%81%E9%82%AE%E4%BB%B6%E5%90%8E%E6%92 ...
- jquery lazyload延迟加载技术的实现原理分析_jquery
前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页, ...
- docker logspout
https://hub.docker.com/r/jplock/rsyslog/ docker pull jplock/rsyslog:8.2.2 docker run -d -p 514:514 j ...
- jQuery实现复选框全选、全不选、反选问题解析
今天打算用jQuery实现一下复选框的全选.全不选和反选问题,刚开始用的是attr("checked",true/false)方法,发现只能在最开始实现一次全选,可以实现全不选,无 ...
- 查看hive的配置信息
在启动hive时设置配置属性信息 $ bin/hive --hiveconf <property=value> 查看当前所有的配置信息 hive > set ; hive (db_h ...
- CoreThink主题开发(七)使用H-ui开发博客主题之新闻资讯正文页面
感谢H-ui.感谢CoreThink! 效果图: 后台发文章有上传附件.封面的功能,但是前台代码中有,不能显示,去除了,前台页面还有社会化分享,百度的,页面也不显示. Blog/Cms/Index/d ...