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扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
jQuery is()函数用法3例
May 06 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
jstree的简单实例
Dec 01 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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
解析link_mysql的php版
2013/06/30 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python脚本替换指定行实现步骤
2017/07/11 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Pygame框架实现飞机大战
2020/08/07 Python
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
婚宴致辞
2015/07/28 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL