每天一个jquery插件-省市县联动
省市县联动
搞一个省市县联动的插件，当然会用到接口，不过数据源咋来的我会讲一个最简单的方式获取，这种简单的数据源当然要自己搞啦，下面会讲
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市县联动</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/ssxld.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#div{
border: 1px solid lightgray;
width: 95%;
height: 200px;
display: flex;
justify-content:center;
align-items: center;
margin: 20px auto;
}
.box{
border: 1px solid lightgray;
padding: 5px;
}
</style>
</head>
<body>
<div id="div">
<div class="box">
<select id="s1">
<option value="123">123</option>
</select>
<select id="s2"></select>
<select id="s3"></select>
</div>
</div>
</body>
</html>
<script>
var temp = ssxld("s1","s2","s3");
temp.load();
</script>
var ssxld = function(id1, id2, id3) {
var $id1 = $("#" + id1)
var $id2 = $("#" + id2)
var $id3 = $("#" + id3)
return {
$id1: $id1,
$id2: $id2,
$id3: $id3,
load: function() {
var that = this;
that.action();
that.$id1.change(function() {
var code = $(this).val();
that.changeid2(code)
//不停的看看市区下拉列表更新了没，没有就继续请求，等更新了再更新县下拉列表
var t = setInterval(function(){
var code2 = that.$id2.val();
if(code2.indexOf(code)!=-1){
clearInterval(t);
that.changeid3(code2);
}
},100)
})
that.$id2.change(function() {
var code = $(this).val();
that.changeid3(code)
})
},
action: function() {
var that = this;
that.changeid1("0")
that.changeid2("11")
that.changeid3("1101")
},
changeid1: function(code) {
var that = this;
ssxpromise(code).then(res => {
that.$id1.html("");
res.forEach(item => {
var $op = $("<option value='" + item.code + "'>" + item.name + "</option>");
$op.appendTo(that.$id1);
})
})
},
changeid2: function(code) {
var that = this;
ssxpromise(code).then(res => {
that.$id2.html("");
res.forEach(item => {
var $op = $("<option value='" + item.code + "'>" + item.name + "</option>");
$op.appendTo(that.$id2);
})
})
},
changeid3: function(code) {
var that = this;
ssxpromise(code).then(res => {
that.$id3.html("");
res.forEach(item => {
var $op = $("<option value='" + item.code + "'>" + item.name + "</option>");
$op.appendTo(that.$id3);
})
})
}
}
}
//网络请求
var ssxpromise = function(code) {
var p = new Promise((resolve, reject) => {
$.ajax({
type: 'post',
url: 'https://www.afeitool.xyz/api/Get/GetItems',
data: {
code: code
},
dataType: 'json',
success: res => {
resolve(res)
}
})
})
return p;
}
实现思路
- 当然省市县联动的思路很简单如下
- 就是切换任意选项的时候，那么他的下级列表就更换成对应的下级列表，这个一个change监控就很容易做到，上面的代码很清楚的展示了思路，关键是接口的数据时怎么来的
- 然后讲一下数据源是咋来的，当然必须了解下序列化与反序列化，接着下面就是我想到的最简单的获得数据源的办法了
- 首先，我们百度搜一下省市县编码表，这样子很容易就能找到别人的网站展示的的数据，再不济找到官方提供的数据的网页也行，管你用爬虫还是啥的，最简单的办法就是直接查看源码复制所有标签到你自己的编辑器里面，然后用js分析dom结构之后就很容易找到对应的数据结构
- 比如说下面这部分代码就是我对这个网页的数据分析之后拿到的数据源ip33.com,拿这个做例子就是学习交流哈，没有其他恶意哈，我的处理方式就如下
$(function() {
var ssx = [];
var s1 = $(".ip").children("h4");
for (var i = 0; i < s1.length; i++) {
var temp = $(s1[i]);
var str = temp.text().split(" ");
var sheng = {
name: str[0],
code: str[1],
children: []
};
ssx.push(sheng)
var s2 = temp.next().find("h5");
for (var j = 0; j < s2.length; j++) {
var temp2 = $(s2[j]);
var str2 = temp2.text().split(" ");
var shi = {
name: str2[0],
code: str2[1],
children: [],
parentcode: str[1]
}
sheng.children.push(shi);
var x1 = temp2.next().find("li");
for (var k = 0; k < x1.length; k++) {
var temp3 = $(x1[k]);
var str3 = temp3.text().split(" ");
var xian = {
name: str3[0],
code: str3[1],
parentcode: str2[1]
}
shi.children.push(xian);
}
}
}
console.log(ssx)
})
- 在这样处理完数据之后，我们就有了一个大概的总数据了了，接着用json.stringfy序列化成字串，随便你传到哪里去，等传到你自己的后台之后再反序列化成你规定的格式然后挨个存入数据库保存，这样子自己做一个接口的目标就完成一半了，有了数据源就是自己规定接口的使用规则了，我这里就不细讲了，比较有个code与parentcode很明显可以做查询的条件的，这样子所有数据都能给存一个表里面，反正没问题就是了
- 最后我临时做了个接口在这里，大家可以自己试着调用看看效果有没有问题，反正我做插件用着还行地址
- 最后就没啥了，做这个插件因为和网络有关系，所以必然会有异步的问题存在，这里就用大佬们开发的promise语法就能很好的解决这个问题了，既不会因为网络请求导致页面卡顿也能在数据到来之后准时处理后续
- 完事，收工，核酸已通过，准备回家过年~