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用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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&amp;mysql(三)
2006/10/09 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python实现搜索文本文件内容脚本
2018/06/22 Python
python+flask实现API的方法
2018/11/21 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
Python try except finally资源回收的实现
2021/01/25 Python
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
国贸专业的职业规划书
2014/03/15 职场文书
文化建设工作方案
2014/05/12 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Pytest中conftest.py的用法
2021/06/27 Python