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 ...
随机推荐
- Android 百度语音合成集成
一.环境配置: 下载资料:http://ai.baidu.com/sdk 官方视频讲解:http://ai.baidu.com/support/video 接入指南:http://ai.baidu.c ...
- 部署网站时的错误“one of its dependencies.试图加载格式不正确的程序。”解决方案。
Sever Error in '/' Application.Could not load file or assembly 'SresBase' or one of its dependencies ...
- PowerDesigner之设置(3)——根据Name首字母生成Code
SQL版本:2000 PowerDesigner版本:16 网上有不少介绍 PowerDesigner Name/Code自动调整 的文章,但基本如出一辙. 这里,我就介绍下如何根据输入的Name根据 ...
- Linux考试题附答案
一.选择题 1.在登录Linux时,一个具有唯一进程ID号的shell将被调用,这个ID是什么(B)? A.NID B.PID C.UID D.CID 2.下面哪个目录存放用户密码信息(B) A./b ...
- position:absolute width
position:absolute; left:0px; right:0px; top:0px; bottom:0px; 设置布满整个父范围,设置了absolute的元素可以通过以上4个属性来展开面, ...
- 搭建backup服务器基本流程
守护进程实现,将daemon配置在backup服务器,因为这样其他服务器就能通过服务推即可. 服务端配置流程: 前提两台服务41为backup服务 31是其他服务器即客户端 在41服务器中配置 ...
- Ubuntu 16.04 php卸载
1.卸载 apache2 sudo apt-get --purge remove apache2* sudo apt-get autoremove apache2 (--purge 是完全删除并且不保 ...
- iOS 视图控制器转场动画/页面切换效果/跳转动画 学习
一 学习 在 UINavigationController 中 push 和 pop 的转场效果 (基于iOS7 以上的转场方式) 经过学习了解到,重点分三块: (1)pushAnimation: ...
- win10系统修改Intel VT-x时进入不了BIOS问题
一般电脑进入BIOS的方式都是在开机的时候不停的按F2或者F12,但是Win10系统由于支持快速启动,当win10系统快速启动的时候,按F12或者F2是没反应的,解决方式: 第一步:修改win10的启 ...
- 蓝牙固件升级(OTA升级)原理设计
转:http://blog.csdn.net/yueqian_scut/article/details/50849033 固件空中升级(OTA)与固件二次引导的原理和设计 原创 2016年03月10日 ...