asp.net mvc开发移动端省、市、县三级地区选择控件实现方法
小白浏览:5982018-07-13 20:39:52本文累计收益:0我也要赚钱

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

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

咨询QQ:806693619

一、实现原理

一般常用输入控件是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。

评论列表
发表评论
+ 关注