html代码:

  1. <!-- js级联菜单 -->
  2. <div id="cascMenu">
  3. <select id="select" onchange="getLocal(this.selectedIndex)">
  4. <option>请选择</option><!-- selectedIndex=0 -->
  5. <option>北京</option><!-- selectedIndex=1 -->
  6. <option>上海</option>
  7. <option>广州</option>
  8. </select>
  9. <select id="selectInfo">
  10. <option>请选择</option>
  11. </select>
  12. <div>

js代码:

  1. function getLocal(selectIndex){
  2. var arr=new Array();
  3. arr[0]=[new Option("请选择","1")];
  4. arr[1]=[new Option("东城区","1"),new Option("西城区","2"),new Option("朝阳区","3")];
  5. arr[2]=[new Option("黄埔区","1"),new Option("其他区","2")];
  6. arr[3]=[new Option("海珠区","1"),new Option("天河区","2"),new Option("白云区","3"),new Option("黄浦区","3")];
  7. var selectInfo=document.getElementById("selectInfo");
  8. selectInfo.innerHTML="";
  9.   //为子下拉列表添加内容
  10. for(var i=0;i<arr[selectIndex].length;i++){
  11. selectInfo.options[i]=arr[selectIndex][i];
  12. }
  13. }

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. SAE+wordpress邮箱问题,WP MAIL STMP插件配置但无效解决的方法

    我在SAE上面部署的WordPress是3.9版本号的,而非SAE应用商店里WordPress4sae是3.4的,虽然3.9版本号的确有非常多改进但在部署在SAE上面时须要做非常多改动,并且有些插件也 ...

  2. IOS开发之----常用加密方法

    本文转载至 http://blog.csdn.net/wildfireli/article/details/23191983 (AES.MD5.Base64) 分类: iPhone 2014-04-0 ...

  3. PHPFastCGI进程管理器PHP

    PHP-FPM是一个PHPFastCGI进程管理器,是只用于PHP的.      PHP-FPM其实是PHP源代码的一个补丁,旨在将FastCGI进程管理整合进PHP包中.必须将它patch到你的PH ...

  4. Uva10972(RevolC FaeLoN)

    题目链接:传送门 题目大意:给你一副无向图,问至少加多少条边使图成为边双联通图 题目思路:tarjan算法+缩点(如果已经是双连通图就直接输出0) #include <iostream> ...

  5. knockoutJs在移动设备上有时无法更新控件值

    最近在用cordova(phonegap)写一个移动app,表单比较复杂,用了knockoutJs作为前端的MVVM框架进行数据绑定. 但是发现有时候(其实是每次)如果最后在input中编辑一个值,然 ...

  6. 【转】C#操作word定位光标

    十一.上下左右移动光标位 private void moveLeft() { object moveUnit = Microsoft.Office.Interop.Word.WdUnits.wdWor ...

  7. Js slice()方法和splice()方法

    1.slice(start,end) 从已有的数组中返回选定元素,参数start必填,end选填 <script> delArray(); function delArray(){ var ...

  8. 洛谷 P4071 [SDOI2016]排列计数

    洛谷 这是一道组合数学题. 对于一个长为n的序列,首先我们要选m个使之稳定\(C^{m}_{n}\). 且要保证剩下的序列不稳定,即错排\(D_{n-m}\). 所以答案就是:\[ANS=C^{m}_ ...

  9. Symfony 一些介绍

    Symfony 一些介绍: 路由:能限制 hostname,这就让有大量公共功能的网站可以共用一套代码:URI 识别支持 Reg 检测,让 url 能定义的随心所欲:支持前缀,import,便于模块化 ...

  10. PL/SQL不能格式化SQL:--PL/SQL Beautifier could not parse text

    PL/SQL sql语句美化器点击没有反应.查看下面提示PL/SQL Beautifier could not parse text.本人此次产生的原因是sql语句语法错误. 工具栏处(如果没有此按钮 ...