地址筛选

  • 最近项目中需要一个选择地址的弹框,自己先随便写了下,数据均为模拟。

大致效果:
html

其实代码还是有点冗余,但是已经尽量优化过。先上主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
var filter = {
init: function() { //初次进入获取数据 这时候加载的是省份
$.ajax({
url: "mask.json",
type: "get",
success: function(data) {
getCityCode(data);
$.each(data, function(i, val) {
if (val.item_code.substr(2, 4) == '0000') { //这边是筛选值,如果是请求的话,就按照自己的来
$("#addrList").append("<li value='" + val.item_code + "' level=1" + ">" + val.item_name + "</li>");
}
})
}
});
},
bindEvent: function() {
$("body").on('click', '.adddress', function() { //点击选择地区
filter.init();
$("#addrSelDiv").show();
});
$("body").on('click', '.mod_address_slide_list_2 li', function(e) { //点击列表数据
e.preventDefault();
var that = $(this);
//点击第一级菜单时 1.显示选中 2.存值 3.查询有没有下一级(根据val 根据name) 4.(先清空数据)存在数据更新列表 5.值回显(有下一级显示在上面,无下一级关闭弹框,获取全部值)
that.addClass('on').siblings().removeClass('on'); //1.将自身值设置为选中
var level2 = that.attr('level'); //当前列表显示的值是第几级
var targetLi = $(".mod_address_slide_tabs_1").find('li[level=' + level2 + ']'); //当再次回来点击清空后面的值,变成请选择
if (targetLi && targetLi.length > 0) {
targetLi.nextAll().remove();
var clone = targetLi.clone();
$(".mod_address_slide_tabs_1").append(clone);
$(".mod_address_slide_tabs_1").find('li:last-child').addClass('cur').siblings().removeClass('cur').end().removeAttr('level').find('span').html('请选择');
}
if (level2 == "1") { //不管有没有值都进行这一步 列表==市
setCookie('province', that.parent().html()); //2.存值
$("#addrList").html("");
filter.updateLevel(that); //5
$.each(cityCode, function(i, val) {
if (val.item_code.substr(4, 2) == '00' && val.item_code.substr(0, 2) == that.val().toString().substr(0, 2) && val.item_code.substr(2, 4) != '0000') {
if (val) {
$("#addrList").append("<li value='" + val.item_code + "' level=2" + ">" + val.item_name + "</li>"); //4
} else {
filter.setValue();
}
}
});
} else if (level2 == "2") { // 列表==区
setCookie('city', that.parent().html()); //2.存值
$("#addrList").html("");
filter.updateLevel(that); //5
$.each(cityCode, function(i, val) {
if (val.item_code.substr(0, 4) == that.val().toString().substr(0, 4) && val.item_code.substr(4, 2) != '00') {
if (val) {
$("#addrList").append("<li value='" + val.item_code + "' level=3" + ">" + val.item_name + "</li>"); //4
} else {
filter.setValue();
}
}
})
} else if (level2 == "3") { //清空列表
setCookie('place', that.parent().html()); //2.存值
filter.updateLevel(that); //5
filter.setValue();
} else {
return;
}
});
$("body").on('click', '.mod_address_slide_tabs_1 li:not(:last-child)', function() { //点击第一个tab切换
var index = $(this).index();
if ($(this).parents('.mod_address_slide_tabs_1').find('li').length == 1) {
return false;
}
$(this).addClass('cur').siblings().removeClass('cur');
if (index == '0') {
$("#addrList").html(getCookie('province'));
} else if (index == "1") {
$("#addrList").html(getCookie('city'));
}
});
$("body").on('click', '.showAddr', function() { //显示值在页面
if ($(this).html() == "") {
$(".adddress").click();
} else {
$(".adddress").click();
$(".mod_address_slide_tabs_1").find('li:last-child').prev().addClass('cur').siblings().removeClass('cur');
$(".mod_address_slide_tabs_1").find('li:last-child').hide();
}
})
$("body").on("click", '.close', function() { //点击关闭按钮
if ($(".showAddr").html() == "") {
delCookie('province');
delCookie('city');
delCookie('place');
$(".mod_address_slide_tabs_1").find('li:not(:last-child)').remove();
$(".mod_address_slide_tabs_1").find('li').removeAttr('level').removeClass('cur');
$(".mod_address_slide_list_2").html("");
}
$("#addrSelDiv").hide();
})
},
updateLevel: function(val) { // 更新第一个tab上面的level编号
var obj = $(".mod_address_slide_tabs_1").find('li[level=' + $(val).attr('level') + ']'); //不在重复显示添加相同的Li 如果存在
if (obj && obj.length > 0) {
obj.find('span').html($(val).html());
} else {
var clonehtml = $(".mod_address_slide_tabs_1").find('li:last-child').clone(); //请选择部分
clonehtml = $(clonehtml).attr('level', $(val).attr('level')).find('span').html($(val).html()).end();
$(".mod_address_slide_tabs_1").find('li:last-child').before(clonehtml);
}
$(".mod_address_slide_tabs_1").find('li:last-child').addClass('cur').siblings().removeClass('cur');
},

这是只要的核心代码。
这个有几个核心点:

  1. 头脑逻辑要清晰,一不小心就会出错;
  2. 采用的cookie,所以要开启服务前提下。数据其实只请求一次,后面都是重cookie中取
  3. 要给每一级li都有一个对应的标识符便于区分

遇见多个的情况就可以封装下。
这是我在项目组使用的情况
html

详细的代码请看 https://github.com/sulishibaobei/area-linkage

谢谢你给我的支持,坚持原创技术分享,共同成长