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. 【BZOJ4716】假摔 二分+暴力

    [BZOJ4716]假摔 Description [题目背景] 小Q最近喜欢上了一款游戏,名为<舰队connection>,在游戏中,小Q指挥强大的舰队南征北战,从而成为了一名dalao. ...

  2. Building Shops

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Submissi ...

  3. C语言-数组篇

    C语言数组 一.数组的概念 用来存储一组数据的构造数据类型 特点:只能存放一种类型的数据,如全部是int型或者全部是char型,数组里的数据成为元素. 二.数组的定义 格式: 类型 数组名[元素个数] ...

  4. 2015-02-08——js笔记

    示例1: 关于事件对象 MSIE:window.event,  cancelBubble,  returnValue,  srcElement, button(鼠标按键,1,4,2,左中右) W3C: ...

  5. 爬取豆瓣电影信息保存到Excel

    from bs4 import BeautifulSoup import requests import html.parser from openpyxl import Workbook,load_ ...

  6. SQLtie 增删该查

    建表,添加数据,更新数据,删除数据,删除表 . 先介绍三个核心方法 1.openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象. 2.transaction:这个方法允许我们根据 ...

  7. Mybatis参数总结(转载)

    转载自: MyBatis传入多个参数的问题 mybatis传递参数总结 一.单个参数 1.基本数据类型 (1)直接使用 List<ChargeRuleDO> tests(long id); ...

  8. 免费的webservice接口

    快递查询接口 http://webservice.36wu.com/ExpressService.asmx ip查询接口 http://webservice.36wu.com/ipService.as ...

  9. 剑指offer 面试46题

    面试46题: 题目:把数字翻译成字符串 题:给定一个数字,我们按照如下规则把它翻译为字符串:0翻译成“a”,1翻译成“b”,……,11翻译成“1”,……,25翻译成“z”.一个数字可能有多个翻译.例如 ...

  10. DP专题(不定期更新)

    1.UVa 11584 Partitioning by Palindromes(字符串区间dp) 题意:给出一个字符串,划分为若干字串,保证每个字串都是回文串,同时划分数目最小. 思路:dp[i]表示 ...