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 相关文章推荐
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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开发中常用的8个小技巧
2008/08/27 PHP
ajax php 实现写入数据库
2009/09/02 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
JS iFrame加载慢怎么解决
2016/05/13 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
DOM事件探秘篇
2017/02/15 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
我的求职择业计划书
2014/04/04 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
Python实现排序方法常见的四种
2021/07/15 Python