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操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
基于JavaScript实现随机点名器
Feb 25 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中显示数组与对象的实现代码
2011/04/18 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP解决中文乱码
2017/04/28 PHP
javascript中的五种基本数据类型
2015/08/26 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
纯js实现隔行变色效果
2017/11/29 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
《阳光》教学反思
2014/02/23 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
考博导师推荐信范文
2015/03/27 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python