JS简单实现城市二级联动选择插件的方法


Posted in Javascript onAugust 19, 2015

本文实例讲述了JS简单实现城市二级联动选择插件的方法。分享给大家供大家参考。具体如下:

js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技巧制作完成的。本效果只是为了演示如何实现,里面的数据不全,需要的自己可以添加。

运行效果截图如下:

JS简单实现城市二级联动选择插件的方法

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>Js城市二级联动选择插件</title>
<script>
var citys=new Array(
new Array("南京","淮安","扬州","常州",'其它'),
new Array("北京"),
new Array("天津"),
new Array("上海"),
new Array("其它")
);
function scity(pname,cname){
var province=['江苏省','北京','天津','上海','其它'];
document.write('<select id="pro" onchange="selectc(this)" name="'+pname+'">');
document.write('<option value="">--选择省份--</option>')
for(var i=0;i<province.length;i++){
 document.write('<option value="'+province[i]+'">'+province[i]+'</option>');
}
document.write('</select>');
document.write('<select id="city" name="'+cname+'">');
document.write('<option value="">--选择城市--</option>');
document.write('</select>');
selectc(document.getElementById("pro"));
}
function selectc(pobj){
  var index=pobj.selectedIndex-1;
   var cobj=document.getElementById("city");
   cobj.innerHTML='';
   if(index>=0){
   for(var i=0;i<citys[index].length;i++){
   var option=document.createElement("option");
   var text=citys[index][i];
   option.value=text;
   option.innerHTML=text;
   cobj.appendChild(option);
   }
   }else{
   var option=document.createElement("option");
   option.value="";
   option.innerHTML="--选择城市--";
   cobj.appendChild(option);
   }
}
</script>
</head>
<body>
<script>
 scity('p','c');
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript跨域刷新实现代码
Jan 01 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 Javascript
js实现当前输入框高亮显示的方法
Aug 19 #Javascript
jQuery实现的仿select功能代码
Aug 19 #Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 #Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 #Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 #Javascript
js实现文本框支持加减运算的方法
Aug 19 #Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 #Javascript
You might like
php类的定义与继承用法实例
2015/07/07 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
php 数组元素快速去重
2017/05/05 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python中引用与复制用法实例分析
2015/06/04 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
演讲比赛获奖感言
2014/02/02 职场文书
客服专员岗位职责
2014/02/28 职场文书
遗嘱继承公证书
2014/04/09 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
励志演讲稿200字
2014/08/21 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书