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实现级联菜单(没有后台)的更多相关文章

  1. JS动态级联菜单

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

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

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

  3. JS实现级联菜单

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

  4. js实现“级联菜单”

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  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. Linux下用户管理、目录结构

    linux的文件系统是采用层级式的树状目录结构,在此结构中的最上层是根目录“/”,然后在此目录下再创建其他的目录. 目录介绍: / root,存放root用户的相关文件 home,存放普通用户的相关文 ...

  2. Android无线测试之—UiAutomator UiSelector API介绍之二

    Android的布局与组件及组件属性介绍 一.布局: 1)线性布局:控价在线性方向上一次排列 2)表格布局:向表格一样有标准的行和列 3)相对布局:通过相对定位的方式让控件出现在布局的任何位置 4)帧 ...

  3. 《从零开始学Swift》学习笔记(Day 28)——总结使用问号(?)和感叹号(!)

    原创文章,欢迎转载.转载请注明:关东升的博客 在使用可选类型和可选链时,多次使用了问号(?)和感叹号(!),但是它们的含义是不同的,下面我来详细说明一下. 1. 可选类型中的问号(?) 声明这个类型是 ...

  4. 初识Python、数据类型、基本语句

    Python是一种面向对象的.直译式计算机程序设计语言,也是一种功能强大的且完善的通用型语言,是一种脚本语言. Python的主要特点:是面向过程的.面向对象的:模块丰富,功能强大:语法简单易学:扩展 ...

  5. FTP上传和下载文件的应用

    FTP(File Transfer Protocol)协议主要用来在网络上进行文件传输.FTP通讯除了有一个默认的端口21外,还有其他端口,同城两个端口同时进行数据传输.一个是默认的端口(通常为21) ...

  6. 【python】-- Django

    Django Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessio ...

  7. Unity字体文件放Resources和打成ab对比

    情况一:公共字体打成ab的时候,加载A界面的时候加载了font的ab,卸载A和font的ab后,接着加载B界面,加载了font的ab,卸载B和font的ab,这时候字体对应的asset会在内存里有两份 ...

  8. MySQL错误日志提示innodb_table_stats和innodb_index_stats不存在故障处理

    查看MySQL error日志,发现有如下报错 7efbc586f700 InnoDB: Error: Table "mysql"."innodb_table_stats ...

  9. MySQL中InnoDB全文检索

    InnoDB存储引擎从1.2.x开始支持全文索引技术,其采用full inverted index的方式.在InnoDB存储引擎中,将(DocumentID,Postition)视为一个ilist.因 ...

  10. servle 3.0 新特性之一 对上传表单的支持

    1. 上传 * 上传对表单的要求: > method="post" > enctype="multipart/form-data",它的默认值是:a ...