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 一个注册页面有省市联动的更多相关文章

  1. jsp注册页面的省份联动(网上copy别人的,然后自己弄了一下才知道怎么用)

    首先写一个js里面是所有的省份一些七七八八的东西,直接复制黏贴过去就好了. var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, d ...

  2. MyEclipse做一个注册页面,需要注意的地方。

  3. 学习笔记_Java_day14—编码实战___一个注册页面的完整流程

  4. Servlet(4):一个简单的注册页面

    一. 注册要求 1. 一个注册页面 username (文本框) password:密码 (密码框) passwordYes :再次输入密码(密码框) hobby (多选框) sex (单选框) in ...

  5. HTML&CSS基础学习笔记1.22-简单的注册页面

    一个简单的注册页面 表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...

  6. node.js实现简单的登录注册页面

    首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...

  7. 使用Html和ashx文件实现其简单的注册页面

    记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个情况,写一个注册页面程序 中 一直在出错,大的问题小的问题一直出错,似乎是不在状 ...

  8. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  9. 使用vue和drf后台进行登录页面和注册页面(本文大概的疏通一下前后台是怎么交互的)

    注册页面 先从vue页面开始,下面是举例的vue页面截图 从上面的截图我们可以看到一些vue的指令:v-model和v-on(缩写成@) v-model是表单指令:就是获取属性值,在这里就是这些输入框 ...

随机推荐

  1. textarea如何实现高度自适应(一)

    转自轩枫阁 - http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 方法一:div模 ...

  2. C语言I—2019秋作业01

    1您对软件工程专业或计算机科学与技术专业了解是什么? 工程专业将成为一个新的热门专业.软件工程专业以计算机科学与技术学科为基础,突出软件开发的工程性,使学生在掌握计算机科学与技术方面知识和技能的基础上 ...

  3. GPS学习笔记

    预备知识 1. 卫星发送信号时,是以特定频率的电磁波为载波,调整信号到载波上的.多普勒效应就是,卫星和接收机是相对运动的,那么载波的频率会随运动距离发生改变.(<GPS测量与数据处理>p3 ...

  4. 深度学习tensorflow实战笔记(2)图像转换成tfrecords和读取

    1.准备数据 首选将自己的图像数据分类分别放在不同的文件夹下,比如新建data文件夹,data文件夹下分别存放up和low文件夹,up和low文件夹下存放对应的图像数据.也可以把up和low文件夹换成 ...

  5. [考试反思]1010csp-s模拟测试67:摸索

    嗯...所谓RP守恒? 仍然延续着好一场烂一场的规律. 虽说我也想打破这个规律,但是并不想在考烂之后打破这个规律.(因为下一场要考好???) 我也不知道我现在是什么状态,相较于前一阶段有所提升(第一鸡 ...

  6. MySQL 语句执行过程详解

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  7. C++ 11新标准实现POJ No.1001-Exponentiation

    Exponentiation(高精度幂计算)(标签:链表,字符串,快速幂计算) 题目描述 对数值很大.精度很高的数进行高精度计算是一类十分常见的问题.比如,对国债进行计算就是属于这类问题. 现在要你解 ...

  8. MySQL传统点位复制在线转为GTID模式复制

    1.  GTID优缺点 MySQL传统点位复制在5.7版本前是主要的主从复制模式,而随着MySQL5.6版本引入GTID,并且MySQL5.7进行各方面的优化以后,在mySQL5.7(尤其是MySQL ...

  9. 简单搭建syslog-ng server记录log

    ### 简单搭建syslog-ng server记录log 安装syslog-ng apt-get install syslog-ng 安装syslog-ng 配置syslog-ng vim /etc ...

  10. mysql忘记密码怎么办??

    1.停掉mysql 1.1单实例停止方式 [root@qiuhom ~]# /etc/init.d/mysqld stop Shutting down MySQL. [ OK ] 1.2多实例停止方式 ...