javascript省市级联功能实现方法实例详解


Posted in Javascript onOctober 20, 2015

本文实例讲述了javascript省市级联功能实现方法。分享给大家供大家参考,具体如下:

初步实现方法:

<html>
<head>
<script language="javascript">
 function changecity(){
 var province = document.form1.selprovince.value;
 var newoption1,newoption2;
 switch(province){
  case "四川省":
  newoption1 = new Option("成都市", "chengdu");
  newoption2 = new Option("绵阳市", "mianyang");
  break;
   case "湖北省" : 
  newoption1= new Option("武汉市","wuhan");
  newoption2= new Option("襄樊市","xiangfan");
  break;
   case "山东省" : 
   newoption1= new Option("青岛市","qingdao");
   newoption2= new Option("烟台市","yantai");
  break;  
 }
 document.form1.selcity.options.length=0;
 document.form1.selcity.options.add(newoption1);
 document.form1.selcity.options.add(newoption2);
 }
</script>
</head>
<form name="form1" action="" method="post">
 <select name="selprovince" onchange="changecity()">
 <option>--请选择开户帐号的省份--</option>
 <OPTION value="四川省">四川省</OPTION>
 <OPTION value="山东省">山东省</OPTION>
 <OPTION value="湖北省">湖北省</OPTION>
 </select>
 <select name="selcity">
 <option>--请选择开户帐号的城市--</option>
 </select>
</form>
</html>

改进实现方法:

<html>
<head>
<script language="javascript">
 function changecity(){
 var cityList = new Array();
 cityList[0]=['成都', '绵阳', '德阳', '自贡'];
 cityList[1]=['济南', '青岛', '淄博', '枣庄'];
 cityList[2]=['武汉', '宜昌', '荆州', '襄樊'];
 var pindex = document.form1.selprovince.selectedIndex-1;
 var newoption1;
 document.form1.selcity.options.length = 0;
 for(var j in cityList[pindex]){
  newoption1 = new Option(cityList[pindex][j], cityList[pindex][j]);
  document.form1.selcity.options.add(newoption1);
 }
 }
</script>
</head>
<form name="form1" action="" method="post">
 <select name="selprovince" onchange="changecity()">
 <option>--请选择省份--</option>
 <OPTION value="四川省">四川省</OPTION>
 <OPTION value="山东省">山东省</OPTION>
 <OPTION value="湖北省">湖北省</OPTION>
 </select>
 <select name="selcity">
 <option>--请选择城市--</option>
 </select>
</form>
</html>

改进方法2:

<html>
<head>
<script language="javascript">
 function citychange(){
 var cityList = new Array();
 cityList['辽宁省'] = ['沈阳','鞍山','大连'];
 cityList['山东省'] = ['济南','烟台','蓬莱'];
 cityList['山西省'] = ['太原','大同','平遥'];
 var pindex = document.form1.selprovince.value;
 var newoption1;
 document.form1.selcity.options.length = 0;
 for(var i in cityList[pindex]){
  newoption1 = new Option(cityList[pindex][i],cityList[pindex][i]);
  document.form1.selcity.options.add(newoption1);
 }
 }
</script>
</head>
<form action="" name="form1" method="post">
 <select name="selprovince" onchange="citychange()">
 <option>请选择省份</option>
 <OPTION value="辽宁省">辽宁省</OPTION>
 <OPTION value="山东省">山东省</OPTION>
 <OPTION value="山西省">山西省</OPTION>
 </select>
 <select name="selcity">
 <option>请选择城市</option>
 </select>
</form>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 #Javascript
js点击文本框后才加载验证码实例代码
Oct 20 #Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 #Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 #Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 #Javascript
JavaScript实现的简单烟花特效代码
Oct 20 #Javascript
require.js的用法详解
Oct 20 #Javascript
You might like
php 文件上传类代码
2011/08/06 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
Node.js实现数据推送
2016/04/14 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python多线程操作实例
2014/11/21 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
ipython和python区别详解
2019/06/26 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
生产副总岗位职责
2013/11/28 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
律师授权委托书范本
2014/10/07 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
基于Redission的分布式锁实战
2022/08/14 Redis