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是表单指令:就是获取属性值,在这里就是这些输入框 ...
随机推荐
- 学习笔记60_python面向对象
**** //可以给函数参数设置默认值 def stu_register(name,age,course,country="CN"): 若你的函数在定义时不确定用户想传入多少个参数 ...
- group:状压dp,轮廓线
神仙题.但是难得的傻孩子cbx没有喊题解,所以也就难得的自己想出来了一个如此神仙的题. 如果是自己想的,说它神仙是不是有点不合适啊..? 反正的确不好像.关键就在于这个标签.颓完标签就差不多会了. % ...
- Selenium +Chrome浏览器如何模拟手机操作
Selenium +Chrome浏览器如何模拟手机操作 进入手机模式 打开谷歌浏览器,按F12,进入开发者模式,点击Toggle device toolbar,进入手机模式 设置Chrome的手机模式 ...
- NOIP 模拟29 B 侥幸
这次考得好纯属是侥幸,我T3打表试数试了两个小时,没有想打T2的正解(其实是打不出来)所以这个T3A掉纯属是侥幸,以后还是要打正解 (以下博客最好按全选观看,鬼知道为啥这个样子!) 在这里也口胡一下我 ...
- 2、linux基础-面试题
自己写的答案 1.1GB 2.4 3.ubuntu.dbian.Fedora 4.系统.硬件.clock -w 5.文件 6.uname -a 7.centos是redhat的社区版,redhat是商 ...
- TCP--文件上传
客户端 public class Test2_UpdateClient { public static void main(String[] args) throws UnknownHostExcep ...
- 三石之道之Ansible自动化运维工具部署
centos6默认python版本为2.6 centos7默认python版本为2.7 ansible需要最低python2.7的支持 总结:centos6要部署ansible工具,需要先升级pyth ...
- 本地yum配置
yum yum(Yellow dog Updater, Modified)是一个在 Fedora 和 RedHat 以及 CentOS 中的 Shell 前端软件包管理器.基于 RPM 包管理,能够从 ...
- Mybatis加入日志
*在mybatis-config.xml核心配置文件中加入如下设置,在configration中标签中加入 <!--打印日志,方便看输出SQL --> <settings> & ...
- C#实现整型数据字任意编码任意进制的转换和逆转换
实现如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespa ...