JavaScript实现省市联动效果


Posted in Javascript onNovember 22, 2019

本文实例为大家分享了JavaScript实现省市联动的具体代码,供大家参考,具体内容如下

实现效果:

1.当点击文字时选中对应的下拉菜单

2.选择省,后面跟本省对应的市

实现过程:

 1.获得省的Dom对象

 2.用循环为省的下拉菜单设置option子节点,并将数组每个pName的值赋给创建的子节点

 3.每次循环同时为option子节点设置value属性

 4.同理在点击省的同时,为市创建option子节点,并将cName的值赋给子节点,设置属性

实现细节:

 1. 点击省时采用onchange事件(元素值改变时触发)
 2. 每次为市增加节点,要将节点清空,否则市的节点会叠加,可采用option长度为0, citySel.options.length = 0;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .box{
  width: 500px;
  padding: 20px;
  border: 1px solid #aaa;
  margin: 100px auto;
 }
 .box select{
  width: 150px;
  margin: 10px;
 }
 </style>
 <script>
 var provs = [{"id":"01","pName":"河南省"},{"id":"02","pName":"河北省"},{"id":"03","pName":"四川省"}];
  var citys = [{"id":"001","cName":"安阳市","pId":"01"},{"id":"002","cName":"郑州市","pId":"01"},{"id":"003","cName":"新乡市","pId":"01"},{"id":"004","cName":"邯郸市","pId":"02"},{"id":"005","cName":"石家庄市","pId":"02"},{"id":"006","cName":"合肥市","pId":"02"},{"id":"007","cName":"广陵市","pId":"03"},{"id":"008","cName":"成都市","pId":"03"},{"id":"009","cName":"重庆市","pId":"03"}];
  function $(id){
  return document.getElementById(id);
  }
  window.onload = function (){
    var proSel = $('province');
    for(var i = 0; i<provs.length; i++){
     var Coption = document.createElement('option');
     Coption.innerHTML = provs[i].pName;
     Coption.setAttribute('value',provs[i].id);
     proSel.appendChild(Coption);
    }
   proSel.onchange = function(){
    var city =$('city');
    var Pid = this.value;
    city.options.length = 0;//把Select的属性清空
    for(var i=0; i<citys.length; i++){
     if(Pid == citys[i].pId){
     var Noption = document.createElement('option');
     Noption.innerHTML = citys[i].cName;
     Noption.setAttribute('value',citys[i].id);
     city.appendChild(Noption);
    }

    }
    }
}
 </script>
</head>
<body>
 <div class="box">
   请选择:
   <select id="province">
   <option value="00">----请选择----</option>
   </select><label for="province">省</label>
   <select id="city">
   <option value="000">----请选择----</option>
   </select><label for="city">市</label>
 </div>
</body>
</html>

JavaScript实现省市联动效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
JS 判断代码全收集
Apr 28 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
Vue混入mixins滚动触底的方法
Nov 22 #Javascript
超简单的微信小程序轮播图
Nov 22 #Javascript
微信小程序实现Swiper轮播图效果
Nov 22 #Javascript
Js代码中的span拼接问题解决
Nov 22 #Javascript
微信小程序商品详情页底部弹出框
Nov 22 #Javascript
小程序实现图片预览裁剪插件
Nov 22 #Javascript
Vue数据双向绑定底层实现原理
Nov 22 #Javascript
You might like
深入理解PHP原理之执行周期分析
2016/06/01 PHP
php测试kafka项目示例
2020/02/06 PHP
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
汽车4S店销售经理岗位职责
2015/04/02 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
宾馆客房管理制度
2015/08/06 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS