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 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
script标签属性用type还是language
Jan 21 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 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验证码(支持中文)
2007/02/14 PHP
PHP比你想象的好得多
2014/11/27 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
jupyter notebook 多行输出实例
2020/04/09 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
总经理助理岗位职责
2013/11/08 职场文书
自荐信写法介绍
2014/01/25 职场文书
员工培训邀请函
2014/02/02 职场文书
幼儿园新年寄语
2014/04/03 职场文书
节约用水的口号
2014/06/20 职场文书
自我检讨报告
2015/01/28 职场文书
同学聚会邀请函
2015/01/30 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
小学班长竞选稿
2015/11/20 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python