三级联动部分源码

最新推荐文章于 2022-06-18 09:58:32 发布

jack马

最新推荐文章于 2022-06-18 09:58:32 发布

阅读量469

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/jacksosion/article/details/85775177

js 专栏收录该内容

1 篇文章

订阅专栏

这是一个HTML页面，用于用户填写邮寄地址，包含姓名、手机号、地区（三级联动选择）和详细地址等字段。页面中使用JavaScript进行省份、城市、区县的联动选择，并通过AJAX进行表单验证和数据提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
       <meta name="format-detection" content="telephone=no" />
       <meta name="format-detection" content="email=no" />
       <title>填写邮寄地址</title>
   </head>
   <body>
       <div class="concentBox">

           <div class="form-group" style="margin-top: 0.3rem;">
               收到你的地址后，我们会为你寄出奖品，地址一旦提交后不可修改，请认真填写。
           </div>
           <form role="form" class="form-signin" id="defaultForm">
               <div class="form-group">
<label for="username">姓名<span>*</span></label>
<input class="form-control"type="text" name="username" id="name" placeholder=""/>
</div>
<div class="form-group">
<label for="mobile">手机号<span>*</span></label>
<input class="form-control"type="text" name="mobile" id="tel" placeholder="请输入11位有效手机号"/>
</div>

<div class="form-group">
<label >地区<span>*</span></label>
<div class="col-sm-5" style="float: left;width: 100%;padding: 0;">

<div class="col-sm-2" style="padding-left: 0;">
<select class="form-control" name='province' id="province">
<option value="0">请选择</option>
</select>
</div>
<div class="col-sm-2" style="padding: 0;">
<select class="form-control" name="city" id="city">
<option value="0">请选择</option>
</select>
</div>
<div class="col-sm-2" style="padding-right: 0;">
<select class="form-control" name="area" id="area">
<option value="0">请选择</option>
</select>
</div>
</div>
</div>

<div class="form-group">
<label for="addr">详细地址<span>*</span></label>
<div class="col-lg-5" style="padding: 0;">
<textarea class="form-control" name="addr" rows="5" placeholder=""></textarea>
</div>
</div>
<div class="form-group">
                   <div class="formbtn btn-danger" id="destroy" >提交</div>
               </div>
           </form>
       <div class="success"></div>
       </div>
       <div class="tishi">
                   <span>提交成功</span>
                   <p>我们会在10天内为你寄出奖品，请耐心等待，如对本活动有任何疑问，公众号留言或微博咨询</p>
                   <a class="fanhui" href="https://m.yiketalks.com/html/activity/huaweiActive1.html">返回活动首页</a>
               </div>


       <script>
       $(function() {
       var ua = navigator.userAgent.toLowerCase();
   if(ua.indexOf('xxxxxxxxx')>-1) {
$('.titBox').css("display","none");
   }
       var ssid = oBath.GetQueryString('ssid');
       // 初始化省市区
       initAddress();

       // 更改省份后的操作
       $("select[name='province']").change(function() {
           var provCode = $("select[name='province']").val();
           getCity(provCode);

       });

       // 更改城市后的操作
       $("select[name='city']").click(function() {
           var cityCode = $("select[name='city']").val();
           getArea(cityCode);
       });

   });

   function initAddress() {
   var ssid = oBath.GetQueryString('ssid');
var obj = {
   "ssid": ssid,
   "pid": '1',
           }
   var signObj = oBath.Getsign(obj);
   var sign = signObj[0];
   var nonce = signObj[1];
   var time = signObj[2];
   //var firstProvCode;
       // ajax请求所有省份
$.ajax({
type: "POST",
url: "https://api1.xxxx.com:9500/market/getCity?sign=" + sign + "&timestamp=" + time + "&nonce=" + nonce,
data: {
   "ssid": ssid,
   "pid": '1',
       },
async: true,
success: function (data) {
   if(data.status == 1){
       $.each(data.content, function(i, d) {
               $("select[name='province']").append(
                       "<option value='"+d.id+"'>" + d.cityname
                               + "</option>");

           });
   }
// 获取第一个省份的code

//           firstProvCode = data.content[0].id;
//           // 根据第一个省份code获取对应城市列表
//           getCity(firstProvCode);
}
});

   }

   //获取对应城市列表（里面包括获取第一个城市的区县列表）
   function getCity(provCode) {
var ssid = oBath.GetQueryString('ssid');

var obj = {
   "ssid": ssid,
   "pid": provCode,
           }
   var signObj = oBath.Getsign(obj);
   var sign = signObj[0];
   var nonce = signObj[1];
   var time = signObj[2];
   //var firstCityCode;

       // ajax请求所有市级单位
       $.post("https://api1.xxxx.com:9500/market/getCity?sign=" + sign + "&timestamp=" + time + "&nonce=" + nonce,
{
           "ssid": ssid,
           "pid" : provCode,
       }, function(data) {

           // 先清空城市下拉框
           $("select[name='city']").empty();
$("select[name='area']").empty();
           $.each(data.content, function(i, d) {
               $("select[name='city']").append(
                       "<option value='"+d.id+"'>" + d.cityname
                               + "</option>");
           });

           // 获取第一个城市的code
           //firstCityCode = data.content[0].id;
           // 根据第一个城市code获取对应区县列表
           //getArea(firstCityCode);

       }, 'json');
   }

   function getArea(provCode) {
var ssid = oBath.GetQueryString('ssid');
var obj = {
   "ssid": ssid,
   "pid": provCode,
           }
   var signObj = oBath.Getsign(obj);
   var sign = signObj[0];
   var nonce = signObj[1];
   var time = signObj[2];
       // ajax请求所有区县单位
       $.post("https://api1.xxxx.com:9500/market/getCity?sign=" + sign + "&timestamp=" + time + "&nonce=" + nonce,
       {
           "ssid": ssid,
           "pid" : provCode,
       }, function(data) {
           console.log(data)
           // 先清空区县下拉框
           $("select[name='area']").empty();
           $.each(data.content, function(i, d) {
               $("select[name='area']").append(
                       "<option value='"+d.id+"'>" + d.cityname
                               + "</option>");
           });
       }, 'json');
   }

       </script>
       <script>
$(function () {
   var ssid = oBath.GetQueryString('ssid');

$('form').bootstrapValidator({
   message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
   username: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '不能为空'
},
}
},
mobile: {
validators: {
notEmpty: {
message: '电话号码不能为空'
},
regexp: {
regexp: /^1\d{10}$/,
message: '手机号码不正确，请重新输入'
}
}
},
}

})
$(".formbtn").click(function(){
var nums = $("#defaultForm").serialize();
// var obj = $("#defaultForm").serialize()+ "&ssid=" + ssid;
var arr = $("#defaultForm").serialize().split("&");
var obj={"ssid":ssid};
for(var j = 0; j < arr.length; j++){
   obj[arr[j].split("=")[0]]=arr[j].split("=")[1];
}

   var signObj = oBath.Getsign(obj);
   var sign = signObj[0];
   var nonce = signObj[1];
   var time = signObj[2];

var flag = $('#defaultForm').data("bootstrapValidator").isValid();//校验合格
if(flag){
var $form = $('#defaultForm');

$.ajax({
   type:"post",
       url: "https://api1.xxxx.com:9500/market/address?sign=" + sign + "&timestamp=" + time + "&nonce=" + nonce,
       data:obj,
       async:true,

       success: function (data){
           console.log(data)
           if(data.status ==1){
               $(".tishi").css("display", "block");

           }else{
               $(".success").css("display", "block");
   $(".success").html("您输入的信息有误！");
   var timer1 = setTimeout(function() {
               $(".success").css("display", "none");
           }, 2000);
           }
       }
});
}else{
   $(".success").css("display", "block");
   $(".success").html("您输入的信息有误！");
   var timer1 = setTimeout(function() {
               $(".success").css("display", "none");
           }, 2000);
}
})
})
       </script>
   </body>
</html>