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 目录列举函数
Nov 06 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
js实现秒表计时器
Dec 16 Javascript
JavaScript实现留言板案例
Mar 17 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获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
php基本函数汇总
2015/07/09 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
php适配器模式简单应用示例
2019/10/23 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
初一生物教学反思
2014/01/18 职场文书
爱祖国演讲稿
2014/05/04 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
革命电影观后感
2015/06/18 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript