js实现省级联动（数据结构优化）
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
从QQ网站中提取的纯JS省市区三级联动菜单
我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据
-
JS实多级联动下拉菜单类，简单实现省市区联动菜单！
作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.
-
基于jquery & json的省市区联动代码
效果演示: html代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>省市区联动</title> <script src="/Scripts/jquery.min.js" type="text/javascript"></script> <sc
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
最好用的省市二级联动 原生js实现你值得拥有
复制代码 代码如下: <script language=javascript> cities = new Object(); cities['台湾']=new Array('台北','台南','其他'); cities['马来西亚']=new Array('Malaysia'); cities['北京']=new Array('北京'); cities['上海']=new Array('上海'); cities['天津']=new Array('天津'); cities['重庆']=new A
-
全国省市二级联动下拉菜单 js版
本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&
-
js实现的全国省市二级联动下拉选择菜单完整实例
本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
PHP+Mysql+Ajax+JS实现省市区三级联动
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
-
js实现一个省市区三级联动选择框代码分享
运行效果: ================================================= 部分代码: ================================================= 当然首先你数据库中要有这个table,不然你没有数据.....^_^ 复制代码 代码如下: <tr> <td class="tr pr10 "> 所在地: </td> <td class="tl">
-
省市区三级联动下拉框菜单javascript版
实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat