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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
javascript动态加载三
2012/08/22 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
浅析从vue源码看观察者模式
2018/01/29 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
Python yield 使用浅析
2015/05/28 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
django允许外部访问的实例讲解
2018/05/14 Python
Windows下python3.6.4安装教程
2018/07/31 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python内置模块collections知识点总结
2019/12/19 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
python爬虫请求头的使用
2020/12/01 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
监督检查工作方案
2014/05/28 职场文书
结婚保证书
2015/01/16 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
超市员工管理制度
2015/08/06 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers