分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 技术分享

asp.net mvc中使用jquery H5省市县三级地区选择控件

发布时间：2023-09-06 01:25责任编辑：郭大石关键词：暂无标签

地区选择是项目开发中常用的操作，本文讲的控件是在手机端使用的选择控件，不仅可以用于实现地区选择，只要是3个级别的选择都可以实现，比如专业选择、行业选择、职位选择等。效果如下图所示：

附：本实例asp.net mvc中使用jquery H5省市县三级地区选择控件及中国省市县标准地区库下载地址

咨询QQ：806693619

一、实现原理

一般常用输入控件是input，当点击input的时候执行jquery获取焦点事情，然后弹出本地区选择插件，选择完地区后点击确定将选择的值返回给input完成地区输入。核心代码包括样式文件、h5自适应rem.js脚本、控件核心js脚本及后台数据提供代码。

二、核心js
?
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
$(function () {
$("#inputVal").focus(function () {
$.selectPanel("1", "/PubConfig/GetAreaList", "山东省", "inputVal");
});
//默认允许选择个数
var pubSelectNum = 2;
//记录第一级选择值
var pubFirstVal;
//记录第二级选择值
var secondVal;
//默认数据获取地址
var pubAjaxUrl = "/PubConfig/GetAreaList";
//返回值赋予对象ID
var pubReturnObjId;
$.extend({
//初始化数据
selectPanel: function (selectNum, ajaxUrl,defaultVal,returnObjId) {
pubSelectNum = selectNum;
pubAjaxUrl = ajaxUrl;
pubFirstVal = defaultVal;
pubReturnObjId = returnObjId;
initLayout();
//第一级别
$.ajax({
url: pubAjaxUrl,
type: ‘POST‘,
cache: false,
dataType: ‘json‘,
data: { pId: "ROOT" },
success: function (data) { //成功事件
var listr = "", firstId = "";
$.each(data, function (i, item) {
//配置默认省份
if (data[i].NAME == defaultVal) {
firstId = data[i].ID;
listr = listr + "<li id=‘" + data[i].ID + "‘ data-title=\"" + data[i].NAME + "\" class=\"act font18\">" + data[i].NAME + "</li>";
}
else
listr = listr + "<li id=‘" + data[i].ID + "‘ data-title=\"" + data[i].NAME + "\" class=\"font18\">" + data[i].NAME + "</li>";
});
$(".p-first").empty();
$(".p-first").append(listr);
//初始化第二级别
$.ajax({
url: pubAjaxUrl,
type: ‘POST‘,
cache: false,
dataType: ‘json‘,
data: { pId: firstId },
success: function (data) { //成功事件
var listr = "", firstId = "";
$.each(data, function (i, item) {
if (data[i].PID == "Yes")
listr = listr + "<li id=‘" + data[i].ID + "‘ data-title=\"" + data[i].NAME + "\" class=\"foldIco font18\">" + data[i].NAME + "</li>";
else
listr = listr + "<li id=‘" + data[i].ID + "‘ data-title=\"" + data[i].NAME + "\" class=\"font18\">" + data[i].NAME + "</li>";
});
$(".p-second").empty();
$(".p-second").append(listr);
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
alert(textStatus);
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
alert(textStatus);
}
});
}
});
//向body加载初始布局
我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved