asp.net mvc开发移动端省、市、县三级地区选择控件实现方法
地区选择是项目开发中常用的操作，本文讲的控件是在手机端使用的选择控件，不仅可以用于实现地区选择，只要是3个级别的选择都可以实现，比如专业选择、行业选择、职位选择等。效果如下图所示：
附：本实例asp.net mvc中使用jquery H5省市县三级地区选择控件及中国省市县标准地区库下载地址
一、实现原理
一般常用输入控件是input，当点击input的时候执行jquery获取焦点事情，然后弹出本地区选择插件，选择完地区后点击确定将选择的值返回给input完成地区输入。核心代码包括样式文件、h5自适应rem.js脚本、控件核心js脚本及后台数据提供代码。
二、核心js
$(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加载初始布局
function initLayout() {
$(".selectPanel").remove();
var StringArray = [];
StringArray.push("<div class=\"sl-mask\" style=\"opacity: 1;\"></div>");
StringArray.push("<div class= \"selectPanel sl-actionsheet-toggle\">");
StringArray.push("<div class=\"p-bar\">");
StringArray.push("<div class=\"sl-btn sl-btn-inline sl-btn-small sl-btn-border-gray cancelBtn font18\">取消</div>");
StringArray.push("<div class=\"sl-btn sl-btn-inline sl-btn-small sl-btn-border-orange p-bar-right confirmBtn font18\">确定</div>");
StringArray.push("</div>");
StringArray.push("<div class=\"p-value font16\">");
StringArray.push("</div>");
StringArray.push("<div class=\"p-content\">");
StringArray.push("<div class=\"p-content-panel\">");
StringArray.push("<ul class=\"p-first\">");
StringArray.push("</ul>");
StringArray.push("</div>");
StringArray.push("<div class=\"p-content-panel\">");
StringArray.push("<ul class=\"p-second\">");
StringArray.push("<ul class=\"p-three\">");
StringArray.push("</ul>");
StringArray.push("</ul>");
StringArray.push("</div>");
StringArray.push("</div>");
StringArray.push("</div>");
$("body").append(StringArray.join(""));
}
//取消
$(".cancelBtn,.sl-mask").live("click", function () {
$(".sl-mask").remove();
$(".selectPanel").remove();
});
//确定
$(".confirmBtn").live("click", function () {
$("#" + pubReturnObjId).val("1");
var selectedList = $(".p-value-cell");
if (selectedList.length == 1)
{
$("#" + pubReturnObjId).val(selectedList.html());
}
else {
}
$(".selectPanel").remove();
$(".sl-mask").remove();
});
//点击第一级别执行的
$(".p-first>li").live("click", function () {
var thisObject = $(this);
pubFirstVal = thisObject.html();
$(".p-first>li").removeClass("act");
thisObject.addClass("act");
//更新第二级别数据
$.ajax({
url: pubAjaxUrl,
type: 'POST',
cache: false,
dataType: 'json',
data: { pId: thisObject.attr("id") },
success: function (data) { //成功事件
var listr = "", firstId = "";
$.each(data, function (i, item) {
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);
}
});
});
//点击第二级别执行的
$(".p-second>li").live("click", function () {
var thisObject = $(this);
secondVal = thisObject.html();
if (thisObject.hasClass("act")) {
thisObject.removeClass("act");
$(".p-three").remove();
thisObject.removeClass("expandIco");
thisObject.addClass("foldIco");
}
else {
$(".p-second>li").removeClass("act");
thisObject.addClass("act");
thisObject.removeClass("foldIco");
thisObject.addClass("expandIco");
//更新第三级别数据
$.ajax({
url: pubAjaxUrl,
type: 'POST',
cache: false,
dataType: 'json',
data: { pId: thisObject.attr("id") },
success: function (data) { //成功事件
var listr = "<ul class=\"p-three\">", firstId = "";
$.each(data, function (i, item) {
//判断是否有选择值，如果有需要添加已选择状态样式
if ($(".p-value-cell[data-code*='" + data[i].ID + "']").length > 0) {
listr = listr + "<li id='" + data[i].ID + "' data-title=\"" + data[i].NAME + "\" class=\"act\">" + data[i].NAME + "</li>";
}
else
listr = listr + "<li id='" + data[i].ID + "' data-title=\"" + data[i].NAME + "\">" + data[i].NAME + "</li>";
});
listr = listr + "<ul>";
$(".p-three").remove();
thisObject.after(listr);
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
alert(textStatus);
}
});
}
});
//点击第三级别执行的
$(".p-three>li").live("click", function () {
var thisObject = $(this);
if (thisObject.hasClass("act")) {
$(".p-value-cell[data-code*='" + thisObject.attr("ID") + "']").remove();
thisObject.removeClass("act");
}
else {
var selectedList = $(".p-value-cell");
if (selectedList.length > pubSelectNum * 1 - 1)
{ alert("最多允许选择一项"); return; }
thisObject.addClass("act");
var listr = "<div class=\"p-value-cell font18\" data-code=\"" + thisObject.attr("ID") + "\" data-title=\"" + thisObject.html() + "\">" + pubFirstVal + secondVal + thisObject.html() + "</div>";
$(".p-value").append(listr);
}
});
//点击已经选择项目，取消选择
$(".selectPanel .p-value-cell").live("click", function () {
var thisObject = $(this);
//更新选项状态
$("#" + thisObject.attr("data-code")).removeClass("act");
thisObject.remove();
});
});
三、样式文件
.sl-mask {
position: fixed;
z-index: 10000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
height: 100%;
}
.selectPanel {
position: fixed;
left: 0;
bottom: 0;
-webkit-transform: translate(0,100%);
transform: translate(0,100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 50000;
width: 100%;
background-color: #EFEFF4;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
background-color: #fff;
}
.sl-actionsheet-toggle {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.selectPanel .p-bar {
padding: .15rem;
}
.selectPanel .p-bar-left {
float: left;
}
.selectPanel .p-bar-right {
float: right;
}
.selectPanel .p-value {
padding: 0 .15rem;
position: relative;
line-height: 1.5;
}
.selectPanel .p-value-cell {
display: inline-block;
position: relative;
height: .6rem;
margin: .15rem 0;
margin-right: 0px;
line-height: .6rem;
text-align: center;
margin-right: .2rem;
padding: 0 .15rem;
padding-right: 0.15rem;
padding-right: .5rem;
border: 1px solid rgba(0,0,0,0.2);
color: #666;
border-radius: .08rem;
}
.selectPanel .p-value::before {
content: ' ';
width: 100%;
height: 1px;
background: #e3e3e3;
position: absolute;
left: 0;
top: 0;
}
.selectPanel .p-value::after {
content: ' ';
width: 100%;
height: 1px;
background: #e3e3e3;
position: absolute;
left: 0;
bottom: 0;
}
.selectPanel .p-value-cell:after {
content: '\2715';
position: absolute;
top: 0;
right: .1rem;
font-weight: 100;
}
.selectPanel .p-content {
position: relative;
overflow: visible;
width: 100%;
background: #fff;
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.selectPanel .p-content .p-content-panel {
overflow: hidden;
width: 100%;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-left: 1px solid #e3e3e3;
height: 9.22rem;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
height: 7.5rem;
}
.selectPanel .p-content .p-first > li {
line-height: 1.05rem;
position: relative;
list-style: none;
border-bottom: 1px solid rgba(188,187,187,0.28);
padding: 0 .234rem 0 .3rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.selectPanel .p-content .p-second > li {
line-height: 1.05rem;
position: relative;
list-style: none;
border-bottom: 1px solid rgba(188,187,187,0.28);
padding: 0 .234rem 0 .3rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.selectPanel .p-content .p-second .foldIco {
background-image: url(../../SelectPanel/Images/67.png);
background-repeat: no-repeat;
background-size: .25rem;
background-position: 90% .35rem;
}
.selectPanel .p-content .p-second .expandIco {
background-image: url(../../SelectPanel/Images/86.png);
background-repeat: no-repeat;
background-size: .25rem;
background-position: 90% .35rem;
}
.selectPanel .p-content .p-three > li {
line-height: 1.05rem;
position: relative;
list-style: none;
border-bottom: 1px solid rgba(188,187,187,0.28);
padding: 0 .234rem 0 .6rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.selectPanel .act {
background-color: rgba(255,214,0,0.14);
color: #0180cf;
}
/*按钮定义*/
.sl-btn {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: .3rem;
padding-right: .3rem;
text-align: center;
text-decoration: none;
color: #FFFFFF;
line-height: .98rem;
border-radius: .08rem;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: hidden;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
border: 0px;
}
.sl-btn-inline {
display: inline-block;
}
.sl-btn-medium {
height: .8rem;
line-height: .78rem;
}
.sl-btn-small {
height: .6rem;
line-height: .58rem;
}
.sl-btn-border-gray {
color: #666;
border: 1px solid rgba(0,0,0,0.2);
}
.sl-btn-border-gray:not(.qs-btn-border-disabled):active, .qs-btn-border-gray:not(.qs-btn-border-disabled).eventactive {
color: rgba(0,0,0,0.6);
background-color: #DEDEDE;
}
.sl-btn-border-orange {
color: #fd8000;
border: 1px solid #fd8000;
}
.sl-btn-border-orange:not(.qs-btn-border-disabled):active, .qs-btn-border-orange:not(.qs-btn-border-disabled).eventactive {
color: #fff;
background-color: #fb9934;
}
html {
font-family: "microsoft yahei","宋体";
-webkit-text-size-adjust: 100%;
font-size: 100px;
}
body {
margin: 0;
max-width: 7.5rem;
min-height: 100%;
min-width: 320px;
margin: 0 auto;
color: #666666;
background-color: #f2f2f2;
-webkit-overflow-scrolling: touch;
font-size: .3rem;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, form, p, ul, input {
margin: 0px;
padding: 0px;
}
input, textarea {
font-family: "microsoft yahei","宋体";
font-size: .27857142rem;
color: #666666;
}
li {
padding: 0px;
margin: 0px;
line-height: 180%;
list-style-type: none;
}
.font9 {
font-size: .1888rem;
}
.font10 {
font-size: .234rem;
}
.font12 {
font-size: .25714285rem;
}
.font13 {
font-size: .27857142rem;
}
.font14 {
font-size: .3rem;
}
.font15 {
font-size: .32142857rem;
}
.font16 {
font-size: .34285714rem;
}
.font18 {
font-size: .38571428rem;
}
.font20 {
font-size: .468rem;
}
.font24 {
font-size: .56249999rem;
}
.font28 {
font-size: .65624999rem;
}
四、数据获取代码
数据获取代码是在.net mvc的c层完成的，根据你的项目需要需要自己完成。
//地区选择控件使用
public ActionResult GetAreaList()
{
var pId = ClassesLib.GetString("pId");
string sqStr = "Select ID,NAME,PID from KZRCW.TSSYS_AREA where PID = '" + pId + "' order by id";
List<TSSYS_AREA> list = db.Database.SqlQuery<TSSYS_AREA>(sqStr).ToList();
for (int i = 0; i < list.Count; i++)
{
var pidStr = list[i].ID;
var listKid = db.TSSYS_AREA.Where(c => c.PID == pidStr).ToList();
if (listKid.Count > 0)
list[i].PID = "Yes";
else list[i].PID = "No";
}
return Json(list, JsonRequestBehavior.AllowGet);
}
五、调用方法-控件使用方法
<body>
<input id="inputVal"/>
</body>
$("#inputVal").focus(function () {
$.selectPanel("1", "/PubConfig/GetAreaList", "山东省", "inputVal");
});
使用时需要传入4个参数，第一个是最多允许选择的个数、第二个数据获取路径，第三个第一层默认选择值，第四个选择完成后选择值需要赋予的控件ID。
猜您可能还喜欢
- asp.net mvc内微信pc端、H5、JsApi支付方式总结（5105）
- HTML5 WebSocket与C#建立Socket连接实现代码（2005）
- asp.net mvc开发移动端省、市、县三级地区选择控件实现方法（1226）
- C# 使用Socket链接Ftp服务器下载上传代码FTPClient（1213）
- VS 2017调试程序鼠标定位文本输入框浏览器闪退调试终止解决方法（1145）
- 关于“System.Data.OleDb.OleDbException，外部数据库驱动程序 (1) 中的意外错误。”的解决方案（888）
- C# 两个类的实例之间相同属性的值的复制（808）
- C#微信公众号推送消息接口消息排重（806）
- html5 webScoket与C#建立Socket连接（718）
- 什么是.NET Core ？它和.NET Framework 有什么不同？（696）
评论列表
发表评论
文章分类
文章归档
- 2024年4月 (3)
- 2024年3月 (30)
- 2024年1月 (4)
- 2023年12月 (2)
- 2023年11月 (4)
- 2023年10月 (4)
- 2023年9月 (6)
- 2023年3月 (2)
- 2023年2月 (1)
- 2023年1月 (1)
- 2022年12月 (1)
- 2022年9月 (21)
- 2022年8月 (10)
- 2022年7月 (3)
- 2022年4月 (1)
- 2022年3月 (13)
- 2021年8月 (1)
- 2021年3月 (1)
- 2020年12月 (42)
- 2020年11月 (7)
- 2020年10月 (5)
- 2020年8月 (1)
- 2020年6月 (1)
- 2020年3月 (2)
- 2019年12月 (8)
- 2019年11月 (3)
- 2019年9月 (1)
- 2019年4月 (1)
- 2019年3月 (6)
- 2019年2月 (1)
- 2018年7月 (7)
阅读排行
- 1.asp.net mvc内微信pc端、H5、JsApi支付方式总结（5105）
- 2.各大搜索网站网站收录提交入口地址（2566）
- 3.ECharts仪表盘实例及参数使用详解（2446）
- 4.windows 10安装myeclipse 10破解补丁cracker.jar、run.bat闪退解决办法（2287）
- 5.华为鸿蒙系统清除微信浏览器缓存方法（2119）
- 6.HTML5 WebSocket与C#建立Socket连接实现代码（2005）
- 7.HBuilder编辑器格式化代码（1585）
- 8.Js异步async、await关键字详细介绍（lambda表达式中使用async和await关键字）（1329）
- 9. asp.net mvc开发移动端省、市、县三级地区选择控件实现方法（1226）
- 10. C# 使用Socket链接Ftp服务器下载上传代码FTPClient（1213）