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技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
浅析js封装和作用域
2013/07/09 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
销售主管的自我评价分享
2014/01/03 职场文书
《大海那边》教学反思
2014/04/09 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
银行求职自荐信范文
2015/03/04 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
纪检监察立案决定书
2015/06/24 职场文书
高中班主任寄语
2019/06/21 职场文书
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript