Javascript实现二级select联动
1.js
cities = new Object();
cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市');
cities['山西省']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市', '忻州地区', '吕梁地区', '晋中市', '临汾地区', '运城地区'); function set_city(province, city)
{
var pv, cv;
var i, ii; pv=province.value;
cv=city.value; city.length=; if(pv=='') return;
if(typeof(cities[pv])=='undefined') return; for(i=; i<cities[pv].length; i++)
{
ii = i+;
city.options[ii] = new Option();
city.options[ii].text = cities[pv][i];
city.options[ii].value = cities[pv][i];
} }
2.jsp
<form name="form1" action="" method="get">
<select name="province" onChange="set_city(this, this.form.city);">
<option value="">选择省</option>
<option value="河北省">河北省</option>
<option value="山西省">山西省</option>
</select>
<select name="city" id="citys">
<option value="">选择城市</option>
</select>
</form>
3.结果截图



Javascript实现二级select联动的更多相关文章
- JavaScript(jquery)实现二级菜单联动
为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...
- 省市联动_简单的Demo,适用于各种二级菜单联动
最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...
- Ajax和JSON完成二级菜单联动的功能
首先需要找好JSON的包哦: 链接:http://pan.baidu.com/s/1jH6gN46 密码:lbh1 1:首先创建一个前台页面,比如secondMenu.jsp,源码如下所示: < ...
- JS中简单的二级城市联动
代码奉上: <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
- 前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)
一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- 前端基础之BOM和DOM和三个小示例(计时器、搜索框、select联动)
一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...
- Javascript: Let user select an HTML element like Firebug?综述
Javascript: Let user select an HTML element like Firebug? Javascript: Let user select an HTML elemen ...
- select联动遇到的问题
今天写了个select下拉联动,记录下过程中遇到的问题. dom部分 // 拿到选中项的索引 myselect.selectedIndex // 拿到选中项的text/value myselect.o ...
随机推荐
- LoadRunner培训初级教程
一 LoadRunner简介 1.1 Loadrunner介绍 LoadRunner 是 HP Mercury Interactive 用来测试应用程序性能的工具 LoadRunner 通过模拟一个 ...
- 字符转换(C、C++)
标准C和C++库提供了一些转换工具.但是它们在易用性.扩展型和安全型上各有不同. 例如,以atoi为代表的一系列标准C函数就有一些限制: * 只支持单向转换:从文本到内部数据类型.要用C库函数实现另一 ...
- WPF中通过代码设置控件的坐标
用WPF做贪吃蛇小游戏时,发现了一个问题: 贪吃蛇的移动,我是通过不断刷新Rectangle来实现(贪吃蛇的身体由一组Rectangle组成),因此需要不断调整Rectangle的坐标,但是WPF中没 ...
- 【转】不容忽视的ClassNotFoundException
转载地址:http://it.deepinmind.com/jvm/2014/04/11/classnotfoundexception-is-it-slowing-down-your-jvm.html ...
- ShowDoc部署手册
ShowDoc介绍 关于ShowDoc的介绍,请访问:http://blog.star7th.com/2015/11/1816.html 环境依赖 1.必需环境 PHP5.3以上版本.php-gd库 ...
- java udp与tcp
一:基础 NET基本对象java.net.InetAddress类的使用 IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAd ...
- 课堂 表单验证 JavaScript js
页面加载完才开始执行代码要加上 window.onload = function{ } 获取元素节点 var uesrname = document.getElementById("user ...
- 大数据 > 数据平台方案评估
分类 当前措施 说明 百度竞价如何进行数据分析(SEM工程师)数据来源: 1. 百度后台推广数据:api 总展现 总点击 点击率 总消费 点击均价 BDP功能点 1. 串联百度->网站商务通-& ...
- Mac > 编写跨平台桌面应用开发工具,基于 Web 技术
Electron: The Electron framework lets you write cross-platform desktop applications using JavaScript ...
- Thinkphp各大支付平台在线支付集成源码
用Thinkphp给客户开发网站的时候需要用到各大平台付款功能,下面就免费分享给大家,此类是个成熟类,网上down下来的,经过修改测试了(可以直接拿来使用,附带使用方法,有需要的朋友请拿走.),如果有 ...