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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jquery 经典动画菜单效果代码
Jan 26 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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
php5.2时间相差8小时
2007/01/15 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
js 替换
2008/02/19 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
python 实现归并排序算法
2012/06/05 Python
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
adidas泰国官网:adidas TH
2020/07/11 全球购物
乡镇交通安全实施方案
2014/03/29 职场文书
身边的榜样活动方案
2014/08/20 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
总账会计岗位职责
2015/04/02 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL