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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
vue实现移动端div拖动效果
Mar 03 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新手入门学习方法
2011/05/08 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
js调用flash的效果代码
2008/04/26 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
javascript操作css属性
2013/12/30 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
python实现排序算法
2014/02/14 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python 循环while和for in简单实例
2016/08/16 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Linux下python制作名片示例
2018/07/20 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
初中生期末考试的自我评价
2013/12/17 职场文书
公司委托书格式范本
2014/09/16 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
信用卡工资证明范本
2015/06/19 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
关于python中模块和重载的问题
2021/11/02 Python
Echarts如何重新渲染实例详解
2022/05/30 Javascript
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS