手机端地址选择例子(php+HTML+css+js)

最新推荐文章于 2021-06-03 14:53:57 发布
最新推荐文章于 2021-06-03 14:53:57 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： JQ CSS HTML 文章标签： html css javascript php thinkphp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37880655/article/details/78928769
版权
JQ 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
HTML
11 篇文章 0 订阅
订阅专栏
CSS
7 篇文章 0 订阅
订阅专栏

基于thinkphp模板

<!DOCTYPE html >
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>添加地址</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/mobile/css/index2.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/mobile/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/mobile/pay_css/index.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/mobile/css/LArea.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstrap/css/bootstrap.css"/>
    <script src="__PUBLIC__/jQuery-2.1.4/jquery.min.js"></script>
    <script src="__PUBLIC__/mobile/js/LArea.js"></script>
    <script src="__PUBLIC__/mobile/js/jquery.json.js"></script>
    <script src="__PUBLIC__/layer/layer.js"></script>
    <script src="__PUBLIC__/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/mobile2/css/Mobil_hea_fot.css"/>
    <style type="text/css">
        .addmantop{width: 100%;height: 50px;border-bottom: 1px solid #b5b4b5;text-align: center;color: #898a89;background-color: rgba(248,248,248,0.95)}
        .addmantop span{line-height: 50px;font-size: 20px;}
        .addmantop input{float: right;margin-right: 15px;line-height: 48px;border:0px;height: 49px;background-color: rgba(248,248,248,0.95);}
        .addmancon ul li{width: 100%;height: 50px;padding:6px 15px 6px 15px;border-bottom: 1px solid #E5E5E5;line-height: 40px;font-size: 16px;color: #898a89;}
        .addmancon ul li input{width: 100%;height: 100%;border: 0px;}
        .addmancon ul li select{width: 31%;font-size: 12px;height: 35px;margin-top: -15px;}
        .default{color: #898a89;font-size: 18px;margin: 0 auto;line-height: 32px;margin-top: 20px;}
        .default div{width: 32px;height: 32px;float: left;margin-left: 30%}
        .default .radioclass{background:url(__PUBLIC__/images/radion2.png) no-repeat center center;width: 32px;height: 32px;}
        .default .radioclass.active {
            background:url(__PUBLIC__/images/radio1.png) no-repeat right center;width: 32px;height: 32px;
        }
        .addman{ position:fixed;width: 100%;height: 100%;background-color: #fff;top:0px;overflow: auto;right: -100%;}
        .addman .glyphicon-menu-left{float: left;}
        .addman ul li{width: 100%;height: 50px;padding:6px 15px 6px 15px;border-bottom: 1px solid #E5E5E5;line-height: 40px;font-size: 16px;color: #898a89;}
        .addman ul li .glyphicon-menu-right{float: right;line-height: 40px;}
        .addman ul .li1{border-bottom: 1px solid #E5E5E5;height: 30px;line-height: 20px;font-size: 14px;width: 100%;}
        .addman ul .li1 .col-md-4{width: 33%;}
        .addman ul .li1 #left{color: #0094DE;}
    </style>
</head>
<body style="margin:0 auto;">
<form action="{:U('Address/doAddaddress')}" id="addman_form" method="post" onSubmit="return checkForm()">
    <div class="addmantop" style="background: black;color: white">
        <a class="sb-back" href="{:U('Address/addressList')}" style="float: left;padding-top: 12px;margin-left: 10px;">
            <img class="" src="__PUBLIC__/images/back.png" style="height: 25px;">
        </a>
        <span>地址管理</span>
        <input type="submit" name=""  value="保存" style="background: black">
    </div>
    <div class="addmancon">
        <ul>
            <li><input type="text" name="consignee" placeholder="姓名"></li>
            <li><input type="text" name="phone" placeholder="手机号码"></li>
            <li id="demo1">
                <span id="demo2">省份、城市、区县</span>
                <input type="hidden" name="pre" id="prov">
                <input type="hidden" name="city" id="city">
                <input type="hidden" name="area" id="area">
            </li>

            <li><input type="text" name="detailed" placeholder="详细地址，街道，楼牌号" value="" /></li>
        </ul>
    </div>
    <div class="default">
        <div class="radioclass">
            <input type="hidden" name="default" id="default" value="">
            <input type="hidden" name="current" id="current" value="">
        </div>&nbsp; 设为默认地址
        <!-- <input type="checkbox" id="chk" value="" /> -->
    </div>



    <div class="addman">
        <div class="addmantop">
            <span id="houtui" class="glyphicon glyphicon-menu-left"></span>
            <span>选择地址</span>
        </div>
        <ul class="rightNav">
            <li class="li1">
                <span id="left" class="col-md-4">&nbsp;&nbsp;&nbsp;&nbsp;省份&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span id="content" class="col-md-4">&nbsp;&nbsp;&nbsp;&nbsp;城市&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span id="right" class="col-md-4">&nbsp;&nbsp;&nbsp;&nbsp;区县&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </li>
            <volist name="good1" id="vo">
                <li id='{$vo.id}' class='prov'>{$vo.name}<span class='glyphicon glyphicon-menu-right'></span></li>
            </volist>
        </ul>
    </div>
</form>
<script type="text/javascript">
    var addman=$(".addman");
    var rightNav=$(".rightNav");
    var vo = {$tree};
    $("#demo1").click(function(){
        var prov = $(".prov");
//alert(prov.length);
        addman.css({
            //display: "block",
            right: "0px",
            transition: "right 0.5s"
        });
        if (prov.length<1) {
            $(".cit").remove();
            $(".area").remove();
            $("#left").text('省份');
            $("#content").text('城市');
            $("#right").text('区县');
            $("#left").css({
                color:"#0094DE",
            });
            $("#content").css({
                color:"#898a89",
            });
            $("#right").css({
                color:"#898a89",
            });
            //console.log(vo);
            for (var i = 0; i < vo.length; i++) {
                var pre = "<li id='"+vo[i]['id']+"' class='prov'>"+vo[i]['name']+"<span class='glyphicon glyphicon-menu-right'></span></li>";
                rightNav.append(pre);
            }
        }
        $(".prov").click(function(){
            var id=$(this).attr("id");
            var name=$(this).text();
            $("#left").text(name);
            $("#prov").val(id);
            $("#left").css({
                color:"#898a89",
            });
            $("#content").css({
                color:"#0094DE",
            })
            city_ajax(id)
        })
    })
    $("#houtui").click(function(){
        addman.css({
            //display: "none",
            right: "-100%",
            transition: "right 0.5s",
        });
    })
    function city_ajax(id){
        $.ajax({
            type: 'POST',
            url: "{:U('Address/ajaxCityList')}",
            data:"lid="+id,
            success: function(data){
                //console.log(data);
                var jnobj=JSON.parse(data);
                //console.log(jnobj);
                $(".prov").remove();
                for (var a = 0; a < jnobj.length; a++) {
                    var op = "<li id='"+jnobj[a]['id']+"' class='cit'>"+jnobj[a]['name']+"<span class='glyphicon glyphicon-menu-right'></span></li>";
                    rightNav.append(op);
                }
                $(".cit").click(function(){
                    var cid=$(this).attr("id");
                    var cname=$(this).text();
                    $("#content").text(cname);
                    $("#city").val(cid);
                    $("#content").css({
                        color:"#898a89",
                    });
                    $("#right").css({
                        color:"#0094DE",
                    })
                    $.ajax({
                        type: 'POST',
                        url: "{:U('Address/ajaxCityList')}",
                        data:"lid="+cid,
                        success: function(data){
                            var jnobj=JSON.parse(data);
                            //console.log(jnobj);
                            $(".cit").remove();
                            for (var b = 0; b < jnobj.length; b++) {
                                //声明option.<option value="pres[i]">Pres[i]</option>
                                var op1 = "<li id='"+jnobj[b]['id']+"' class='area'>"+jnobj[b]['name']+"</li>";
                                //添加
                                rightNav.append(op1);
                            }
                            $(".area").click(function(){
                                var aid=$(this).attr("id");
                                var aname=$(this).text();
                                $("#right").text(aname);
                                $("#area").val(aid);
                                var manaddress = $(".li1").text();
                                $("#demo2").html(manaddress);
                                addman.css({right: "-100%",transition: "right 0.5s",});
                            })
                        },
                    });
                })
            },
        });
    }

    var current=window.location.href;;
    window.onload = function(){
        $("#current").val(current);
    }
    $(".radioclass").click(function() {
        if($(this).hasClass("active")) {
            $(this).removeClass("active");
            $("#default").val(0);
        }else{
            $(this).addClass("active");
            $("#default").val(1);
        }

    });
    function checkMobile(tel) {
        var reg = /(^1[3|4|5|7|8][0-9]{9}$)/;
        if (reg.test(tel)) {
            return true;
        }else{
            return false;
        };
    }
    function checkForm()
    {
        if($('input[name="consignee"]').val()=='')
        {
            layer.alert('收货人不能为空');
            return false;
        }else if($('input[name="pre"]').val()=='')
        {
            layer.alert('请选择省份');
            return false;
        }else if($('input[name="city"]').val()=='')
        {
            layer.alert('请选择城市');
            return false;
        }else if($('input[name="area"]').val()=='')
        {
            layer.alert('请选择区域');
            return false;
        }else if($('input[name="detailed"]').val()=='')
        {
            layer.alert('请填写地址');
            return false;
        }else if(!checkMobile($('input[name="phone"]').val()))
        {
            layer.alert('手机号码格式有误');
            return false;
        }else
        {
            return true;
        }
    }
</script>
<!--<include file="Public/wxshare"/>-->
</body>
</html>
qq_37880655
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何获取手机端的IP地址
天尘
12-24 4285
最近项目中需要获取手机端的IP地址，查了资料，发现网上的资料不全： 网上方法一：（在WiFi下获取） public  String GetHostWifiIp() { //获取wifi服务           WifiManager wifiManager = (WifiManager) this.getSystemService(Context.WIFI_SERVICE);  
Html5+Css3-手机App实例
01-04
在这个“Html5+Css3-手机App实例”中，我们将深入探讨如何利用这两项技术构建适用于移动设备的App。 HTML5是超文本标记语言的第五个版本，相比之前的HTML4，它引入了许多新的元素、属性和API，旨在提升网页的互动性...
移动端地址选择
09-24
移动端地址选择
手机端网页选择地址插件
11-30
最近做手机端的网页开发，对于选择地址这个需求，我去网上弄了个插件，用户体验挺舒服的（挺赞的），但是有一些bug，被我修复了。因为地址是三级联动的，这个地方我也略微改了，也就是说，不用来做选择地址的插件也可以的，比如某些下拉框也可以拿来用。你也可以根据自己需求修改源码。例子是jsp文件，其实跟html差不多，不会jsp的童鞋可以把关键代码拷贝到HTML中去运行，注意要加jQuery js文件
获取手机端IP地址
weixin_33701617的博客
04-10 263
function getIP(){ $ip=getenv('REMOTE_ADDR'); $ip_ = getenv('HTTP_X_FORWARDED_FOR'); if (($ip_ != "") && ($ip_ != "unknown")){ $ip=$ip_...
Android地址选择（类似手机通讯录）
你知道的昵称
01-16 771
感觉比较好的一个地址选择设计，而且发现有的App中也用到了。还是先上效果图 思路：  1.效果是仿照网上大神实现的类似通讯录样式做的；  2.右边a-z是自定义的一个bar，设置了点击监听事件，以及对话框弹出  3.关键是adapter，判断了字母显示和隐藏  4.用到汉字转拼音、按首字母排序等工具类  5.3个activity的跳转是用回调来实现，每个activity都实现了回调，这样就有了从...
基于PHP的EXT+PHP班级通讯录源码.zip
08-26
通常，一个PHP项目会包含多个文件，如HTML模板、CSS样式表、JavaScript脚本、PHP类文件、配置文件等，但在这个例子中，只有一个文件名给出，这可能是一个包含了所有源代码的单一文件，或者是经过压缩的数据库文件，...
php+mysql学生成绩查询（系统）.zip
06-14
5. **前端界面**：使用HTML、CSS和JavaScript构建用户界面，使用户可以输入查询条件（如学生ID、课程名）并显示查询结果。JavaScript可能用于表单验证和页面动态更新，提供更好的用户体验。 6. **查询操作**：系统...
[主机域名]PHP+AJAX的whois查询程序_whois.rar
最新发布
06-03
4. **前端交互**：在whois查询程序中，前端通常包括HTML用于结构，CSS用于样式，JavaScript用于交互。用户输入域名，点击查询按钮后，JavaScript会捕获这个事件，通过AJAX调用PHP脚本进行查询。 5. **数据解析**：...
Login-app:使用html和CSS登录应用程序
03-15
开发者需要使用JavaScript或者后端技术（如PHP、Node.js等）来处理表单提交，验证用户输入，并可能与数据库交互。此外，为了提高用户体验，还可以添加实时验证，例如在用户输入时检查用户名和密码的正确性。 综上所...
移动端地址选择器
07-18
支持移动端地址选择器
网站 地址选择模板
12-10
html+php地址选择框，分许用于学习
地区选择控件
12-10
方便用户在填写地址时候，能自动获取省市的不用手动去输入，非常好用的一个代码
基于vue.js仿淘宝收货地址，并设置默认地址
07-24
这个案例主要是渲染地址列表，然后设置默认地址，与淘宝的收货地址功能一样，具体自行查看自己的淘宝收货地址...
jQuery京东手机端收货地址选择城市表单代码
11-10
jQuery京东手机端收货地址选择城市表单代码
手机端选择收货地址html写法,jQuery手机端收货地址选择城市三级联动代码
weixin_35437202的博客
06-03 607
特效描述：jQuery手机端 收货地址选择 城市三级联动代码。jQuery手机端收货地址选择城市三级联动代码代码结构1. 引入CSS2. 引入JS3. HTML代码默认调用所在地区：设置默认值所在地区：/*** 默认调用*/!function () {var $target = $('#J_Address');$target.citySelect();$target.on('click', fun...
怎么让php网页适应手机屏幕分辨率,CSS网页自适应,手机布局自适应（@media screen）...
weixin_35700003的博客
03-20 859
利用@media screen实现网页布局的自适应优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值1280分辨率以上(大于1200px)：@mediascreenand(min-width:1200px){#page{width:1100px;}}1100分辨率(大于960px，小于1...
基于php的直播项目
03-02
可能需要使用HTML5、CSS3、JavaScript（如jQuery、Vue.js等）等技术进行开发，实现与WebSocket服务器的交互，展示直播内容和用户互动。 8. **安全考虑**：在直播项目中，需要关注用户隐私保护、防止DDoS攻击、内容...
省市二级联动.zip
04-06
5. **HelloWorld-day12-liandong**：这个文件名可能是项目中的一个示例文件，可能包含具体的HTML、JavaScript（可能包括jQuery和Ajax的代码实现）、CSS，以及服务器端的PHP或Node.js脚本，用于演示如何实现省市二级...
韩顺平讲解：HTML+CSS+JS网页设计深度解析
"51CTO下载-韩顺平html+css+js笔记" 网页设计是构建互联网应用程序的关键组成部分，而HTML、CSS和JavaScript是这一领域不可或缺的三大核心技术。韩顺平的html+css+js笔记提供了对这些技术的详细讲解，适合初学者和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值