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 ...
随机推荐
- Windows Azure 免费初体验 - 创建部署网站
前几天在看到有个学Windows Azure课程,送Windows Azure的活动,课程地址:http://www.microsoftvirtualacademy.com/ 在活得体验资格后,就迫不 ...
- docker学习笔记(2) 构建镜像
一.手动构建一个简单镜像 我们以构建nginx的docker镜像为例:手动构建镜像 docker pull centos 安装基础镜像docker run --name mynginx -it ...
- 1105 第K大的数(二分)
1105 第K大的数 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 数组A和数组B,里面都有n个整数.数组C共有n^2个整数,分别是A[0] * B[0],A[0 ...
- 安装IntelliJ IDEA 破解安装
IDEA 功能介绍 1-深度智力 IntelliJ IDEA为您的源代码编制索引后,通过在每个环境中提供相关建议,提供快速,智能的体验:即时和智能的代码完成,即时代码分析和可靠的重构工具. 2-开箱即 ...
- influxDB 变换类函数
1.DERIVATIVE()函数 作用:返回一个字段在一个series中的变化率. InfluxDB会计算按照时间进行排序的字段值之间的差异,并将这些结果转化为单位变化率.其中,单位可以指定,默认为1 ...
- undefined let 作用域
const o = {uid:123,pid:'wwww'}const wxPayNotifyUrlBizInfo = (o) => { // TODO json let s = '' for ...
- 基于网页api(接口)实现查快递
之前在网上找到一款下载某慕课网站的java版软件,我想知道他是怎么实现:对于视频的下载的,毕竟网页源码中大都不会直接放视频的地址,但是没有公布源码,我就反编译,等到了部分“源码”,逻辑上还是有些问题, ...
- PHP定界符{}的作用
说明: PHP解析一个字符串为"Hello,$World"时会自动解析$World. {}是方便让PHP更快的查找,它告诉PHP这里面就是变量,不用再判断是否是变量了. 例子: $ ...
- ng-disabled的使用
1.适用范围 该指令适用于<input>, <select>,<button> 和 <textarea> 元素. 2.用法解析 ng-disabled ...
- django实现密码加密的注册(数据对象插入)
在 django实现密码非加密的注册(数据对象插入)的基础上,我们对视图和注册页面进行了简单修改 视图 from django.shortcuts import render,redirect,ren ...