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 相关文章推荐
用unescape反编码得出汉字示例
Apr 24 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
再说下636单管机
2021/03/02 无线电
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP 实现链式操作
2021/03/09 PHP
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python六大开源框架对比
2015/10/19 Python
Python获取当前路径实现代码
2017/05/08 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
怎样声明接口
2014/09/19 面试题
Java面向对象面试题
2016/12/26 面试题
高中生校园生活自我评价
2013/09/19 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
商务会议邀请函
2014/01/09 职场文书
农村婚礼证婚词
2014/01/10 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
避暑山庄导游词
2015/02/04 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
钢琴师观后感
2015/06/12 职场文书
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL