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 相关文章推荐
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
vue项目实现分页效果
Mar 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中几种常见安全设置详解
2010/04/06 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
js的对象与函数详解
2019/01/21 Javascript
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
python实现感知器算法详解
2017/12/19 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python实现多进程的四种方式
2019/02/22 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
主题酒店策划书
2014/01/28 职场文书
董事长助理岗位职责
2014/02/18 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis