<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. cmd命令 拷贝某文件夹及其子文件夹文件到其它文件夹

    @ECHO OFF cd/d %H:\FileLoc\CNET&cd.. ::echo 拷贝"%H:\FileLoc\CNET"中文件到"H:\FileLocTe ...

  2. 如何在MFC对话框之间自定义消息传递

    在MFC项目开发中,涉及到不同模块间数据信息的传递,如用户在登录界面成功登录后向系统管理模块发送用户名和密码等信息. 首先,需明确以下两点: 谁要发送这个消息--消息发送方 谁要接受这个消息--消息接 ...

  3. iOS 根据图片URL从本地相册获取图片

    最近做一个聊天的项目,需要发送图片后读取本地图片显示到列表里.刚开始的时候,天真的认为可以用SDWebImage直接加载,然后并不能行. 于是在网上搜了搜,如何根据从相册获取的UIImagePicke ...

  4. BHO启动IE调试

    如下图选择Web Browser Debugger, 输入启动网址

  5. BZOJ 1901: Zju2112 Dynamic Rankings( 树状数组套主席树 )

    裸的带修改主席树.. 之前用BIT套Splay( http://www.cnblogs.com/JSZX11556/p/4625552.html )A过..但是还是线段树好写...而且快(常数比平衡树 ...

  6. 常用Json

    一般Json是页面与页面之间传递使用. Json用途        1 后台与前台数据交互,并且数据较复杂,如果数据单一,直接传递字符串,然后在前台用js分割就行. 2 webservice和html ...

  7. [LeetCode]题解(python):136-Single Number

    题目来源: https://leetcode.com/problems/single-number/ 题意分析: 给定一个数组,每个数都出现了2次,只有一个出现了一次,找出这个数.要求时间复杂度O(n ...

  8. python之面向对象那点事

    一.类与对象 1.什么是类?类,顾名思义,就是具体相同属性的同一类事物的统称及抽象.对象,指是就是具体的抽象类的实例 以上的说法是不是看起来有点云里来雾里去呢.没错,专业的解释总是让人难以理解,这就是 ...

  9. while 、do...while 、for

    1.while 特点:只有条件成立才会执行循环体. while陷阱: while(条件);即直接加分号 2.do while 特点:一定会执行一次循环体 3.for语句 l   初始化等可以是多句(把 ...

  10. SVN权限配置

    初始化SVN仓库后,里面有以下文件. 其中conf是对授权.认证进行管理的,conf目录里的内容有: passwd设立账户密码: authz权限管理: 假设pwd里有user1,user2两个账户 @ ...