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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
js一组验证函数
Dec 20 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 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 session和cookie使用说明
2010/04/07 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
javascript实现下雨效果
2017/03/27 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
python得到电脑的开机时间方法
2018/10/15 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python的launcher用法知识点总结
2020/08/07 Python
零基础学python应该从哪里入手
2020/08/11 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
学生打架检讨书
2014/10/20 职场文书
生活委员竞选稿
2015/11/21 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP