<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>面向对象</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<script>
//定义省得相关信息
var sheng=['请选择','广东省','湖南省','湖北省'];
//定义是的相关信息
var shi = [[],['广州市','东莞市','珠海市'],['长沙市','株洲市','湘潭市'],['武汉市','宜昌市','荆门市']];
//封装一个DOM对象
function $(id){
return document.getElementById(id);
} function createSheng(){
//遍历一维数组
for(var i in sheng){
//定义op对象
var op=new Option(sheng[i],i);
//追加元素到下拉列表
$('sheng').options.add(op);
}
}
function createShi(){
//获取省得索引信息
var index=$('sheng').selectedIndex;
//清除市的下拉选框
$('shi').length=0;
//遍历市的相关信息
for(var i in shi[index]){
var op =new Option(shi[index][i],i);
//追加元素
$('shi').options.add(op);
}
}
//定义一个window.onload事件
window.onload=function(){
createSheng();
//触发事件
$('sheng').onchange=createShi;
}
</script>
</head>
<body>
<select id='sheng'></select>
<select id='shi'></select>
</body>
</html>

javascript实现的功能--二级联动的更多相关文章

  1. JavaScript+Json写的二级联动

    省市区的联动,相当常见 我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...

  2. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

  3. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串,和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  4. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

  5. javascript二级联动

    二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中 ...

  6. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  7. Javascript中二级联动

    主要使用到到了地址JSON格式,来做,没有涉及数据库的读取. <!DOCTYPE html><html><head> <meta charset=" ...

  8. 二级联动,三级联动,初学者,纯javascript,不含jQuery

    二级联动: html代码: <body> <select id="province" onchange="getCity(this.options.se ...

  9. 关于EasyUI查询功能的二级联动

    EasyUI 二级联动 data-options="multiple:true" 属性可实现对于车牌号的多选.

随机推荐

  1. Linux下的经常使用性能查询命令top、vmstat、gprof、pidstat之对照

    (1)查看各个CPU核的使用情况 sudo top -d 1 进入之后,按1,会出现以下的CPU使用情况,当中us列反映了各个CPU核的使用情况,百分比大说明该核在进行紧张的任务. (2)查看哪个进程 ...

  2. inline函数和一般的函数有什么不同

    1.比如: int g(int x) { return x + x; } int f() { return g(); } 这样f会调用g,然后g返回x + x给f,然后f继续把那个值返回给调用者. 如 ...

  3. SQLite 终端相关命令

    SQLite ALL Last login: Fri Dec  5 09:52:08 on ttys002 BeSilent:~ qianfeng$ sqlite3 data.db SQLite ve ...

  4. C++_知识点_全局变量

    全局变量 -全局变量即在函数之外定义的变量 -全局变量保存在静态存储区 注意: -全局变量只能声明和初始化 -全局变量不能进行运算.赋值(非初始化).调用函数 -否则会出现编译错误 -error: e ...

  5. github/python/ show me the code 25题(二)

    第 0014 题: 纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示: { "1":["张三",150,120,100], &q ...

  6. JavaScript 反柯里化

    浅析 JavaScript 中的 函数 uncurrying 反柯里化 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间 ...

  7. underscore api 概览

    underscore 集合函数(数组或对象) _.each(list, iteratee, [context]); _.map(list, iteratee, [context]); _.reduce ...

  8. android小知识之邮箱地址输入自动完成

    虽然不难,但是容易忘记,做个备忘吧 package com.guet.zhuge; import android.app.Activity; import android.os.Bundle; imp ...

  9. DGIM

    http://blog.liulixiang.info/2011/04/05/dgim%E7%AE%97%E6%B3%95%EF%BC%9A%E4%BC%B0%E8%AE%A1%E6%BB%91%E5 ...

  10. Q_D宏

    Qt 源码中有很多Q_Q和Q_D宏,使用这些宏的地方总会看到有q指针和d指针,查了查KDE文档,大体搞清了其中的机理,欧也!Qt的这些私有数据访问策略还是挺值得借鉴.下面就简单总结一下. 访问器 , ...