js实现省级联动(数据结构优化)


Posted in Javascript onJuly 17, 2020

本文实例为大家分享了js实现省级联动的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  div{
   width: 200px;
   float: left;
   margin-left: 20px;
  }
  select{
   width: 200px;
  }
 </style>
</head>
<body>
 
 <div>
  <select id="province" name="province">
   <option value="">---请选择省---</option>
  </select>
 </div>
 <div>
  <select id="city" name="city">
   <option value="">---请选择城市---</option>
  </select>
 </div>
</body>
<script>
 //准备数据---
 let data = [
  {
   p_name:"浙江省",
   p_id:1,
   citys:[
    {
     c_name:"杭州市",
     c_id:100
    },
    {
     c_name:"温州市",
     c_id:101
    },
    {
     c_name:"宁波市",
     c_id:102
    },
    {
     c_name:"嘉兴市",
     c_id:103
    },
    {
     c_name:"湖州市",
     c_id:104
    },
    {
     c_name:"绍兴市",
     c_id:105
    },
    {
     c_name:"金华市",
     c_id:106
    },
   ]
  },
  {
   p_name:"湖北省",
   p_id:2,
   citys:[
    {
     c_name:"武汉市",
     c_id:200
    },
    {
     c_name:"黄石市",
     c_id:201
    },
    {
     c_name:"十堰市",
     c_id:202
    },
    {
     c_name:"襄阳市",
     c_id:204
    },
    {
     c_name:"荆州市",
     c_id:205
    },
    {
     c_name:"黄冈市",
     c_id:206
    },
   ]
  },
  {
   p_name:"山东省",
   p_id:3,
   citys:[
    {
     c_name:"济南市",
     c_id:300
    },
    {
     c_name:"青岛市",
     c_id:301
    },
    {
     c_name:"淄博市",
     c_id:302
    },
    {
     c_name:"枣庄市",
     c_id:303
    },
    {
     c_name:"烟台市",
     c_id:304
    },
    {
     c_name:"日照市",
     c_id:305
    },
   ]
  }
 ];

 // 加载所有的省份信息到一级的下拉列表中
 let province = document.getElementById("province");
 data.forEach((e,i)=>{
  province.innerHTML += '<option value="'+e.p_id+'">'+e.p_name+'</option>'
 });
 //给一级下拉列表绑定onchange事件
 province.onchange = function(){
  // this.value;//选择的省的id
  // alert(this.value);
  //根据省的id去找该省对应的市的信息

  data.forEach((e,i)=>{
   if(e.p_id == this.value){
    let citys = e.citys;
    //将所有的市的信息填充到二级的下拉列表
    let city = document.getElementById("city");

    //把之前的所有选项清掉
    city.innerHTML = '<option value="">---请选择城市---</option>'
    citys.forEach((ele,idx)=>{
     //ele.c_name;//市的名称
     // ele.c_id;//市的id
     city.innerHTML += '<option value="'+ele.c_id+'">'+ele.c_name+'</option>'
    });
   }
 });
 }

</script>
</html>

具体实现如下,发现城市数据存的很深,要通过省来查找城市会比较麻烦,而且循环遍历的是指数级的占内存,通过下面数据结构的优化,相对而言,查询会更容易
实现大概的思路是通过map集合,key找value的思路
存入的时候省,单独放。城市的key等于省的p_id,因为有了标识,这样就很容易相互查询了

//准备数据---
 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>快速入门</title>
</head>
<body>
 <div>
  <select id="province" name="province">
   <option value="">---请选择省---</option>
  </select>
 </div>
 <div>
  <select id="city" name="city" >
   <option value="">---请选择城市---</option>
  </select>
 </div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
 
 let data = [
  {
   p_name:"浙江省",
   p_id:1,
  },
  {
   p_name:"湖北省",
   p_id:2,
  },
 ];

 let city={1:[ { 
     c_name:"杭州市",
     c_id:100
    },
    {
     c_name:"温州市",
     c_id:101
    },
    {
     c_name:"宁波市",
     c_id:102
    },
    {
     c_name:"嘉兴市",
     c_id:103
    },
    {
     c_name:"湖州市",
     c_id:104
    },
    {
     c_name:"绍兴市",
     c_id:105
    },
    {
     c_name:"金华市",
     c_id:106
    },
 ],
 2:[ {
     c_name:"武汉市",
     c_id:200
    },
    {
     c_name:"黄石市",
     c_id:201
    },
    {
     c_name:"十堰市",
     c_id:202
    },
    {
     c_name:"襄阳市",
     c_id:204
    },
    {
     c_name:"荆州市",
     c_id:205
    },
    {
     c_name:"黄冈市",
     c_id:206
    },
 ]
   }

 
 data.forEach((e,i)=>{
  $("#province").append('<option value="'+e.p_id+'">'+e.p_name+'</option>')
 })

 $("#province").change(function(){
 $("#city").empty();
 let num= this.value;
  city[num].forEach((e,i)=>{
   $("#city").append('<option value="'+e.c_id+'">'+e.c_name+'</option>')
  })
 })
 
 
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
js制作支付倒计时页面
Oct 21 Javascript
vue.js学习之递归组件
Dec 13 Javascript
Javascript继承机制详解
May 30 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 #Javascript
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 #Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 #Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 #Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 #Javascript
基于js实现判断浏览器类型代码实例
Jul 17 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python and、or以及and-or语法总结
2015/04/14 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python实现大转盘抽奖效果
2019/01/22 Python
python实现图片转字符小工具
2019/04/30 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
留学推荐信怎么写
2014/01/25 职场文书
小学科学教学反思
2014/01/26 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
销售口号大全
2014/06/11 职场文书
追悼词范文大全
2015/06/23 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python