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 弹出登录窗口实现代码
Dec 24 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Python3使用requests发闪存的方法
2016/05/11 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python Timer 类使用介绍
2020/12/28 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
资产运营委托书范本
2014/10/16 职场文书
工作检讨书大全
2015/01/26 职场文书
写给导师的自荐信
2015/03/06 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
总结Python常用的魔法方法
2021/05/25 Python