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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
js变换显示图片的实例
2013/04/16 Javascript
Javascript学习指南
2014/12/01 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python实现图片插入文字
2019/11/26 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
幼儿园门卫制度
2014/01/29 职场文书
工作自我推荐信范文
2015/03/25 职场文书
公司借条范本
2015/05/25 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2019入党申请书格式
2019/06/25 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server