Vue 一个注册页面有省市联动
var vm = new Vue({
el: '#complete-info',
data: {
provinceList: [],
selectedProvince: "",
cityList: [],
selectedCity: "",
dealerList: [],
selectedDealer: "",
carTypeInfo: [],
selectedCarType: "${carType}",
custName:"${customer.custName}"
},
watch: {
selectedProvince: function (newVal, oldVal) {
var _self = this;
if (newVal && typeof newVal != "undefined") {
$.get("/basedata/area/parent/" + _self.selectedProvince, function (data) {
_self.cityList = data;
})
}
_self.selectedCity = "";
},
selectedCity: function (newVal, oldVal) {
var _self = this;
if (newVal && typeof newVal != "undefined") {
$.get("/basedata/dealer/city/" + newVal, function (data) {
_self.dealerList = data;
})
}
_self.selectedDealer = "";
},
selectedCarType: function (newVal, oldVal) {
var _self = this;
if (newVal && typeof newVal != "undefined") {
$.get("/basedata/states/cartype/"+ _self.selectedCarType, function (data) {
_self.provinceList = data;
_self.selectedProvince="";
});
}
}
},
methods: {
checkInput: function(){
var _self=this;
if(_self.custName=="") return "请填写姓名";
if(_self.selectedProvince=="") return "请选择省市";
if(_self.selectedCity=="") return "请选择市区";
if(_self.selectedDealer=="") return "请选择经销商";
return "ok";
},
submit: function () {
var errMsg=this.checkInput();
if(errMsg!="ok"){alert(errMsg); return;}
var _self=this;
var _cartypes = _self.carTypeInfo
.filter(function(t){if(t.chk==true)return t})
.map(function(t2){return t2.code})
.join();
var _state=$("#home_state").find("option:selected").text();
var _city=$("#home_city").find("option:selected").text();
var data = {
mobile: "${customer.phone}",
name: _self.custName,
attentionCarCode:_self.selectedCarType,
dealerCode: _self.selectedDealer,
recieveInfoCarType: ","+ _cartypes,
visitSource: window.location.href,
stateCode: _self.selectedProvince,
state:_state,
cityCode: _self.selectedCity,
city: _city,
isFromPc: 1,
type: 3
};
$.ajax({
url: "/account/order/complete-customer",
dataType: "json",
data: JSON.stringify(data),
contentType:"application/json",
type: 'post',
success: function (item) {
if (item.Code == 1) {
window.location.href = '/order/account/activity/false';
} else {
alert(item.Msg);
}
}
});
}
},
created: function () {
var _self = this;
$.get("/basedata/cartypeinfo/list", function (data) {
_self.carTypeInfo = data;
//关注车型
var intentions =${Intentions};
if (intentions) {
_self.carTypeInfo.forEach(function (t) {
t.chk=false;
intentions.forEach(function (t2) {
if(t2.carType==t.code) t.chk=true;
})
})
}
});
}
});
//加载完页面设置省
$(function () {
$.get("/basedata/states/cartype/${carType}", function (data) {
vm.provinceList = data;
vm.selectedProvince=${customer.stateCode};
});
});
Vue 一个注册页面有省市联动的更多相关文章
- jsp注册页面的省份联动(网上copy别人的,然后自己弄了一下才知道怎么用)
首先写一个js里面是所有的省份一些七七八八的东西,直接复制黏贴过去就好了. var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, d ...
- MyEclipse做一个注册页面,需要注意的地方。
- 学习笔记_Java_day14—编码实战___一个注册页面的完整流程
- Servlet(4):一个简单的注册页面
一. 注册要求 1. 一个注册页面 username (文本框) password:密码 (密码框) passwordYes :再次输入密码(密码框) hobby (多选框) sex (单选框) in ...
- HTML&CSS基础学习笔记1.22-简单的注册页面
一个简单的注册页面 表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...
- node.js实现简单的登录注册页面
首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...
- 使用Html和ashx文件实现其简单的注册页面
记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个情况,写一个注册页面程序 中 一直在出错,大的问题小的问题一直出错,似乎是不在状 ...
- 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)
使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...
- 使用vue和drf后台进行登录页面和注册页面(本文大概的疏通一下前后台是怎么交互的)
注册页面 先从vue页面开始,下面是举例的vue页面截图 从上面的截图我们可以看到一些vue的指令:v-model和v-on(缩写成@) v-model是表单指令:就是获取属性值,在这里就是这些输入框 ...
随机推荐
- Ambari 集群时间同步配置教程
本文原始地址:https://sitoi.cn/posts/27560.html 步骤 在时间同步主节点创建 ntp.conf 文件 在时间同步从节点上创建 ntp.conf 文件 修改所有节点时区 ...
- 使用ESP8266 打造一款物联网产品---新版ESP8266-RTOS-SDK(V3.1以上)串口使用指南
问题背景: 使用乐鑫的ESP8266做一个物联网的项目,要使用串口0通信,串口1作为打印log.本来是一个非常简单的事情.没想到居然里面有个大坑.本着前任踩坑,后任抱娃的原则. 这里就做个记录,给后面 ...
- nginx篇最初级用法之SSL虚拟主机
注意:在源码安装nginx时必须要使用--with-http_ssl_module参数启动加密模块. openssl genrsa > cert.key //使用openssl自己签发私钥 o ...
- CSPS模拟 82
还是Z哥的题,不过据说最后一题是D哥的 怪不得D2T3突然良心 (其实是突然毒瘤) 总分260大概是省三水平 不过和迪神并列了感觉还是很荣niu幸bi的- T1 考场上我弃了 因为是数学题,还要推柿子 ...
- 记录一些html5和css3的一部分属性
html5 标签1 video:视频 属性: src:视频的url autoplay:视频在就绪后马上播放 controls:向用户显示控件2 audio:音频 属性类似于video3 属性:drag ...
- 大数据之路week01--自学之集合_2(List)
在学习过了Collection之后,接下来我们将去学习List, 先看API文档: List集合的特有功能:(没有列出Collection也有的功能) A:添加功能 add(int index, E ...
- Mybaits 源码解析 (十二)----- Mybatis的事务如何被Spring管理?Mybatis和Spring事务中用的Connection是同一个吗?
不知道一些同学有没有这种疑问,为什么Mybtis中要配置dataSource,Spring的事务中也要配置dataSource?那么Mybatis和Spring事务中用的Connection是同一个吗 ...
- MySQL传统点位复制在线转为GTID模式复制
1. GTID优缺点 MySQL传统点位复制在5.7版本前是主要的主从复制模式,而随着MySQL5.6版本引入GTID,并且MySQL5.7进行各方面的优化以后,在mySQL5.7(尤其是MySQL ...
- UML简明使用
1.继承 空心三角+实线 2.实现接口 空心三角+虚线 3.关联 箭头+实线 4.聚合 空心菱形+实线+箭头 5.组合 实心菱形+实线+箭头 6.依赖 虚线+箭头 7.关联.聚合.组合.依赖的区别 关 ...
- 这份最新Python面试精选问题你会几道?
相信很多小伙伴学python以后都想进大厂,但是进大厂前你得了解些大厂面试题,可以在面试前复习下,以下是精选的5道python面试题: 第一. Python 的特点和优点是什么? Python 可以作 ...