vue.js用select实现省,市,提交后,默认显示省,市信息
<select v-model="citys" name="cityVal" @change="schoolName(citys)">
<option v-for="(item,index) in city" :value="item.val" v-text="item.name" ></option>
</select>
<select v-model="schools" name="schoolVal">
<option v-for="(item,index) in school" :value="item.val" v-text="item.name" ></option>
</select>
<script>
var vue = new Vue({
el: '#body',
data: function() {
return {
city: [{
val: '',
name: '城市'
}],
citys: ,
school: [{
val: '',
name: '高校'
}],
schools: ,
schoolAjax:''
}
},
methods: {
cityName: function() {
var this_obj = this;
$.ajax({
type: "post",
url: $app+"/Clan/city",
dataType: "json",
success: function(res) {
if(res.status) {
$.each(res.info,function(k, v) {
this_obj.city.push({
name:v.ar_name,
val:v.ar_id,
})
}) } else { }
},
error: function() {
$.alert({
msg: '传输错误1'
})
}
});
},
schoolName: function(citys) {
var this_obj = this;
var data = { ar_id:citys};
$.ajax({
type: "post",
data:data,
url: $app+"/Clan/school",
dataType: "json",
success: function(res) {
this_obj.school=[{ val: '',name: '高校'}]
if(res.status) {
$.each(res.info,function(k, v) {
this_obj.school.push({
val:v.sc_id,
name:v.sc_name
})
});
this_obj.schools=this_obj.schoolAjax;
} else { },
error: function() {
$.alert({
msg: '传输错误7'
})
}
});
},
defules:function(){
var this_obj = this;
$.ajax({
type: "post",
url: $app+"/Call/team_user",
dataType: "json",
success: function(res) {
console.log(res.info);
if(res.status) { this_obj.schoolName(res.info.us_arid);
this_obj.schoolAjax=res.info.us_scid; } else { }
},
error: function() {
$.alert({
msg: '传输错误5'
})
}
});
}
}
}) vue.cityName();
vue.defules();
vue.js用select实现省,市,提交后,默认显示省,市信息的更多相关文章
- vue.js学习之 打包为生产环境后,页面为白色
vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...
- 设置vue启动项目后默认显示的页面
通过配置路由,可以设置vue项目启动后默认显示的页面.路由的path设置为path:"/",启动项目后就会显示默认的组件页面. import Vue from 'vue' impo ...
- vue.js中 ,回车键实现登录或者提交表单!
vue的功能非常强大,但是我们作为一个后端开发人员,前端的东西不一定都弄的很明白,今天就给大家介绍一个回车提交表单的真实案例,达到回车登录的效果! @ keyup.enter 实现的效果 <in ...
- Vue.js,select中的option用ajax想循环控制值的显示 v-model可以实现但提示报错,这是为什么?
应该将v-model换成:value,因为v-model只能绑定一个值,无法绑定多个值 <select v-model="citys"> <optio ...
- jquery 纯JS设置select下拉框,并默认选中第一个
//html页面<select id="payWay" class="easyui-combobox" name="payWay" s ...
- js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div
预期效果: 1.点击Save按钮,创建及显示loading div框 2.Save操作完成后,再删除loading 及弹出提示结果 <html> <head> </hea ...
- vue.js中,如何把text按html格式化显示
先说方法:v-html = "你的字符串" <el-table-column type="expand" label="详情" hea ...
- form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault
出错点:确认按钮上.加onclick事件.每次点击都会追加给form追加on监听方法.累加on方法,重复提交 suppress_exception:true 阻止异常 (百度推送 jdk) 向下按 p ...
- Vue.js 相关知识(基础)
1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...
随机推荐
- 用Proxy进行预处理
如果你学过我的Vue的课程,一定会知道钩子函数,那如果你刚接触我的博客,并没有学习Vue,那我这里给你简单解释一下什么是钩子函数.当我们在操作一个对象或者方法时会有几种动作,比如:在运行函数前初始化一 ...
- [implements] - 一个接口的使用
4种货物,如何使用一个接口实现CRUD: package com.tansuo365.test1.service.goods; import com.tansuo365.test1.entity.Go ...
- oogle advertiser api开发概述——速率限制
速率限制 为了向遍布全球的 AdWords API 用户提供可靠的服务,我们使用令牌桶算法来衡量请求数并确定每秒查询数 (QPS) 速率.这样做的目的是阻止恶意的或不可控的软件大量入侵 AdWords ...
- Nuget 打包 for .Net Standart project
Create .NET Standard packages with Visual Studio 2015 Publishing packages nuge.exe 放在项目目录中 nuget spe ...
- Docker4之Stack
Make sure you have published the friendlyhello image you created by pushing it to a registry. We’ll ...
- 使用explain来分析SQL语句实现优化SQL语句
用法:explain sql 作用:用于分析sql语句 mysql> explain select * from quser_1 where loginemail = "quctest ...
- SpringLog4j日志体系实现方式
1.通过web.xml读取log4j配置文件内容 2.通过不同的配置信息,来实现不同的业务输出,注意:log4j可以写入tomcat容器,也可以写入缓存,通过第三方平台读取 #输入规则#log4j.r ...
- python 移动文件夹
xxx@ddd:~$ mkdir testa testb >>> import shutil >>> shutil.move("/home/xxx/tes ...
- 《剑指offer》第五十六题(数组中只出现一次的两个数字)
// 面试题56(一):数组中只出现一次的两个数字 // 题目:一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序 // 找出这两个只出现一次的数字.要求时间复杂度是O(n),空间复杂度 ...
- Lua和C++交互 学习记录之五:全局数组交互
主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3 参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...