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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
js实现进度条的方法
Feb 13 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
JavaScript中的类型检查
Feb 03 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
基于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之第八天
2006/10/09 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
javascript实现计算器功能
2020/03/30 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
静态成员和非静态成员的区别
2012/05/12 面试题
Linux的文件类型
2016/07/05 面试题
亲属关系公证书
2014/04/08 职场文书
公司食堂管理制度
2015/08/05 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python