- 浏览: 2990282 次
- 性别:
- 来自: 河南
文章分类
- 全部博客 (340)
- Java综合 (26)
- 程序人生 (53)
- RIA-ExtJS专栏 (18)
- RIA-mxGraph专栏 (4)
- RIA-Flex4专栏 (43)
- 框架-Spring专栏 (16)
- 框架-持久化专栏 (22)
- 框架-Struts2专栏 (11)
- 框架-Struts专栏 (12)
- SQL/NOSQL (12)
- 报表/图表 (2)
- 工作流 (5)
- XML专栏 (4)
- 日常报错解决方案 (5)
- Web前端-综合 (12)
- Web/JSP (14)
- Web前端-ajax专栏 (14)
- Web前端-JQuery专栏 (9)
- IDE技巧 (6)
- FILE/IO (14)
- 远程服务调用 (2)
- SSO单点登录 (2)
- 资源分享 (22)
- 云计算 (1)
- 项目管理 (3)
- php专栏 (1)
- Python专栏 (2)
- Linux (1)
- 缓存系统 (1)
- 队列服务器 (1)
- 网络编程 (0)
- Node.js (1)
最新评论
-
hui1989106a:
我的也不能解压,360和好压都试了,都不行
《Spring in Action》完整中文版分享下载 -
temotemo:
这些example有些过时了,官方建议使用HBase-1.0 ...
Java操作Hbase进行建表、删表以及对数据进行增删改查,条件查询 -
zy8102:
非常感谢~
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102:
重命名了一下搞定了
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102:
为什么下载以后老解压不了呢?
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载
一般我们如果实现省市级联效果,思路大致都如下:
1、利用省份下拉框的选项改变事件onChange
2、根据用户选择的省份,动态添加城市下拉框的值
第一种方式,也是最原始的方式
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >
function changeCity( ){
//获取用户选择的省份
var province=document.myform.selProvince.value;
var newOption1,newOption2;
switch(province){
//根据用户选择的省份动态创建城市下拉列表
case "四川省" :
newOption1= new Option("成都市","chengdu");
newOption2= new Option("泸州市","luzhou");
break;
case "湖北省" :
newOption1= new Option("武汉市","wuhan");
newOption2= new Option("襄樊市","xiangfan");
break;
case "山东省" :
newOption1= new Option("青岛市","qingdao");
newOption2= new Option("烟台市","yantai");
break;
}
//清除原有选项
document.myform.selCity.options.length=0;
//将选项添加到选项数组
document.myform.selCity.options.add(newOption1);
document.myform.selCity.options.add(newOption2);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myform" action="register_success.htm" >
<TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
<TD align="center">省份 </TD>
<!--当用户选择不同省份时,将调用函数,改变城市下拉列表值-->
<TD><SELECT name="selProvince" onChange="changeCity( )">
<OPTION>--请选择开户帐号的省份--</OPTION>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山东省">山东省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</SELECT></TD>
</TR>
<TR>
<TD align="center" valign="bottom"> 城市 </TD>
<TD><P>
<SELECT name="selCity">
<OPTION>--请选择开户帐号的城市--</OPTION>
</SELECT>
</P>
</TD>
</TR>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
如果有很多城市,就需要定义很多变量,编写很多重复的代码.使用数组优化省市级联功能
第二方式,通过数组的方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >
function changeCity( )
{
//创建数组,可以不指定大小
var cityList = new Array( );
//为数组赋值。每个单元格可以是数组。JavaScript不支持二维数组
cityList[0]=['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];
cityList[1]=['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];
cityList[2] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];
//获得省份选项的索引号,如四川省为1,比对应数组索引号多1[这么说的原因是升级下拉列表第一项是'请选择省份'也占一个索引位置]
var pIndex=document.myform.selProvince.selectedIndex-1;
var newOption1;
document.myform.selCity.options.length=0;
for (var j in cityList[pIndex])
{
newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">
<TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
<TD align="center">省份 </TD>
<TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )">
<OPTION>--请选择开户帐号的省份--</OPTION>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山东省">山东省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</SELECT></TD>
</TR>
<TR>
<TD><DIV align="center">城市</DIV></TD>
<TD><SELECT name="selCity" id="selCity" onChange="myfun1( )">
<OPTION>--请选择开户帐号的城市--</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
第三种方式,可以通过数组标识方式,也就是使用文字下标的数组再次优化
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >
function changeCity( )
{
//JavaScript中的数组下标可以采用标识符代替。
//可以根据用户选择的value值,与数组下标标识 进行比较,从而找出该省包括的城市。
var province=document.myform.selProvince.value;
var cityList = new Array( );
//数组下标采用文字标识符代替
cityList['山东省'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];
cityList['四川省'] =['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];
cityList['湖北省'] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];
document.myform.selCity.options.length=0;
//根据省份下拉框的值,获取对应数组的索引标识
var pIndex=document.myform.selProvince.value;
var newOption1;
document.myform.selCity.options.length=0;
//数组的读取和数字索引方式相同
for (var j in cityList[pIndex])
{
newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">
<TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
<TD align="center">省份 </TD>
<TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )">
<OPTION>--请选择开户帐号的省份--</OPTION>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山东省">山东省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</SELECT></TD>
</TR>
<TR>
<TD><DIV align="center">城市</DIV></TD>
<TD><SELECT name="selCity" id="selCity" onChange="myfun1( )">
<OPTION>--请选择开户帐号的城市--</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
评论
14 楼
qwe_rt
2010-12-02
xici_magic 写道
基本思想一样 不过我作的下拉框的内容不是死的 需要从数据库中取值
还是用配置文件吧,这种东西拿数据库太奢侈了。
13 楼
xici_magic
2010-12-02
基本思想一样 不过我作的下拉框的内容不是死的 需要从数据库中取值
12 楼
satikey
2010-11-29
qwe_rt 写道
satikey 写道
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。
想法不错啊,这个应该有现成的。每个人完成类似的功能都要自己去抓取一下。搞的大家都累。
写出来一个。。
看这里
http://satikey.iteye.com/blog/826988
11 楼
senton
2010-11-29
一个支持无限级下拉列表的控件:
http://senton.iteye.com/blog/797640
http://senton.iteye.com/blog/797640
10 楼
issue123
2010-11-28
可以使用ext,yui等JS框架比较容易实现,http://www.openkj.com/detail.php?t=8
9 楼
qwe_rt
2010-11-27
satikey 写道
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。
想法不错啊,这个应该有现成的。每个人完成类似的功能都要自己去抓取一下。搞的大家都累。
8 楼
satikey
2010-11-27
JavaCrazyer 写道
satikey 写道
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。
你写代码是什么样的,可以发过来交流下嘛
正在写。现在要配女友去逛街,晚上开能写出来。
7 楼
qwe_rt
2010-11-27
Hedgehog 写道
qwe_rt 写道
作为忠实的用户,我表示很蛋疼。这样选来选去,很麻烦的。我宁愿自己动手打出来。
您愿意打,用户可并非愿意。另外数据提交错误又怎么处理?
既然部分用户选择自己type ,部分用户选择下拉框的方式,那就提供两种方式嘛。
数据作为字符串处理,比如日期,弄给提醒 “格式为yyyy-MM-dd”再加上一个js校验。
如此处理,不会出现数据提交错误吧。
6 楼
Hedgehog
2010-11-27
qwe_rt 写道
作为忠实的用户,我表示很蛋疼。这样选来选去,很麻烦的。我宁愿自己动手打出来。
您愿意打,用户可并非愿意。另外数据提交错误又怎么处理?
5 楼
qwe_rt
2010-11-26
作为忠实的用户,我表示很蛋疼。这样选来选去,很麻烦的。我宁愿自己动手打出来。
4 楼
JavaCrazyer
2010-11-26
fengbo515 写道
个人觉得省市级联一类的东西用ajax占用服务器资源纯属浪费!
你的解决方案是什么样的呢
3 楼
JavaCrazyer
2010-11-26
satikey 写道
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。
你写代码是什么样的,可以发过来交流下嘛
2 楼
fengbo515
2010-11-26
个人觉得省市级联一类的东西用ajax占用服务器资源纯属浪费!
1 楼
satikey
2010-11-26
我们现在在做一个 省 高校 院系的三级联动。我们的处理办法是动态获取数据,向服务器请求,再返回json对象。然后解析。不过我们的浏览器端用的是JQuery进行ajax请求和解析json,如果有时间我可以贴出代码,交流一下。不过现在碰到的问题是我们没法获得全国那么的的高校信息,我们打算尝试在RenRen.com上抓取。
发表评论
-
父子页面传值问题
2012-04-25 17:14 5038开发中遇到父子页面传值问题会很棘手,现收集两种方式的父子页面传 ... -
网页引入CSS的四种方式
2010-12-15 10:51 2167一、使用STYLE属性: 将STYLE属性直接加在个别的元 ... -
各种常用注册页面表单验证
2010-11-26 09:54 20932这里介绍的第一个是最原始的表单验证方式,即没有使用即时验证,需 ... -
JS中关于checkbox全选或全不选
2010-11-26 09:33 2071对于下面这样的全选或者选不选的情况,大家日常会经常看到,总结在 ... -
如何利用JS快速显示当前页面动态时间
2010-10-12 17:01 3436在页面上显示当前时间为常用功能,这里有个简单代码 <t ... -
JS常见弹出对话框
2010-09-19 11:03 2625如果在JS中href写JS代码想实现与普通事件处理代码一样效果 ... -
JavaScript声明变量var和this的总结
2010-09-13 15:49 2660很多人都觉得在javascript ... -
JavaScript之document.cookie使用总结
2010-08-27 15:00 16715“某些 Web 站点在 ... -
JS判断浏览器类型
2010-07-27 10:22 1235这样的文章太多太多,我就先收藏一篇,为了方便今后使用 < ... -
早该知道的7个JavaScript技巧
2010-06-09 07:18 1476我写JavaScript代码已经很久了,都记不起是什么年代开始 ... -
Velocity初学小示例
2010-05-25 22:29 1516Velocity作为替换模板是在有独特优势,最近小学了一下, ...
相关推荐
js 级联菜单 省市级联菜单 级联下拉菜单 js 级联菜单 省市级联菜单 级联下拉菜单 js 级联菜单 省市级联菜单 级联下拉菜单 js 级联菜单 省市级联菜单 级联下拉菜单
javascript---省市级联下拉框
省市级联列表,数据库是SQLserver2008,大家可以参考一下,有什么需要改正的,可以提出来一起改正,大家一起学习。
ajax省市级联相当有用,可以根据项目需求进行改动
非动态省市级联表单。从数据库查询封装成父 List集合。子类键值对String 父类标识。 Map,List>。 页面遍历。根据key 取值,循环tr。
纯JS写的一个省市级联效果纯JS写的一个省市级联效果纯JS写的一个省市级联效果纯JS写的一个省市级联效果纯JS写的一个省市级联效果纯JS写的一个省市级联效果纯JS写的一个省市级联效果纯JS写的一个省市级联效果纯JS写的...
省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联省市级联
使用Javascript实现的省市级联下拉列表菜单,是常用的。。。。。
不需用数据库实现全国城市下拉菜单 js无刷新
各种javascript下拉菜单、省市级联等
省市级联Ajax\省市级联Ajax\省市级联Ajax\省市级联Ajax\省市级联Ajax\
本文实例讲述了JavaScript实现常用二级省市级联下拉列表的方法。分享给大家供大家参考。具体分析如下: 这里省和市的名称都是动态填充,选择省后自动填充城市 <!DOCTYPE ...
省市级联的写法,包括省市区镇等4个级联方式,需要参考的可以看一下
实现省市级联效果 代码类 使用dwr实现省市级联实际开发例子
使用javaScript实现省市级联(二级级联,不能三级级联)
AJAX省市级联
省市级联完整代码
中国城市省市级联选择插件,中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国...
javascript 省市级联特效javascript 省市级联特效
用JavaScript写的HTML版的级联,各省市都有....