JS简单实现城市二级联动选择插件的方法
更新时间：2015年08月19日 12:45:56 作者：企鹅
这篇文章主要介绍了JS简单实现城市二级联动选择插件的方法,涉及javascript实现select遍历与设置技巧,非常简单实用,需要的朋友可以参考下
本文实例讲述了JS简单实现城市二级联动选择插件的方法。分享给大家供大家参考。具体如下：
js实现的城市联动选择菜单，网上经常见到，不多介绍了，本款城市选择菜单原型基于Select，主要使用JavaScript来实现，运用了数组和循环等基础技巧制作完成的。本效果只是为了演示如何实现，里面的数据不全，需要的自己可以添加。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/
具体代码如下：
<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对事件的添加及删除的技巧,涉及javascript事件绑定的方法及浏览器兼容的相关注意事项,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了用js限制网页只在微信浏览器中打开,很多电影站也是这么限制的，原因你懂的，需要的朋友可以参考下2020-01-01
手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。这篇文章主要介绍了微信小程序开发教程-手势解锁实例，有兴趣的可以了解一下。2017-01-01
这篇文章主要为大家详细介绍了js微信分享接口调用的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了JavaScript Module模式的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用，效果大气漂亮且很实用，感兴趣的朋友一起学习吧2016-03-03
以往我们只是习惯于通过数组下标来访问正则匹配到的分组，但分组达到4、5个时，标识起来就会非常麻烦。V8早已实现了正则命名分组提案，只是我们很少使用，本文将介绍JS的正则命名分组2018-06-06
Toast相信对于利用微信小程序开发的朋友们来说都不陌生，有时候官方的样式并不能满足业务要求，怎么办呢，当然有解决办法了。有一个插件可以直接帮我们完成WeToast，这篇文章主要给大家介绍了微信小程序开发之实现自定义Toast弹框的相关资料，需要的朋友可以参考下。2017-06-06
这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
onmouseover事件和onmouseout事件全面理解
最近两天在温习onmouseover事件和onmouseout事件，其实里面有很多深奥的知识，接下来小编给大家带来了onmouseover事件和onmouseout事件全面了解，感兴趣的朋友一起看下2016-08-08
最新评论