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 的 ...
随机推荐
- Docker 使用Docker-Compose编排容器
简介: Docker Compose是一个用来定义和运行复杂应用的Docker工具.一个使用Docker容器的应用,通常由多个容器组成.使用Docker Compose不再需要使用shell脚本来启动 ...
- 【系列教程1】Gradle入门系列三:依赖管理
在现实生活中,要创造一个没有任何外部依赖的应用程序并非不可能,但也是极具挑战的.这也是为什么依赖管理对于每个软件项目都是至关重要的一部分. 这篇教程主要讲述如何使用Gradle管理我们项目的依赖,我们 ...
- (转)Awesome Courses
Awesome Courses Introduction There is a lot of hidden treasure lying within university pages scatte ...
- (转载)Rime输入法—鼠须管(Squirrel)词库添加及配置
为什么用Rime 13年底的时候,日本爆出百度的日本版本输入法的问题,要求政府人员停用,没当回事,反正我没用,当然了,有关搜狗和用户隐私有关的问题就一直没有中断过,也没太在意.但,前几天McAfee爆 ...
- ISE14.7兼容性问题集锦https://www.cnblogs.com/ninghechuan/p/7241371.html
ISE14.7兼容性问题集锦 对于电子工程师来说,很多电路设计仿真软件都是特别大的,安装下来一般都是上G,甚至几十G,而且win7的兼容性也是最好的,不愿意升级win10是因为麻烦,而且没有必要,对于 ...
- 【译】第10节---数据注解-Key
原文:http://www.entityframeworktutorial.net/code-first/key-dataannotations-attribute-in-code-first.asp ...
- 【selenium2】【selenium基础语法】
#栗子 设置浏览器窗口大小 driver.set_window_size(480,800) #栗子 设置浏览器大小为最大maximize_window() 控制浏览器前进.后退 #栗子from sel ...
- Codeforces 776D The Door Problem
题目链接:http://codeforces.com/contest/776/problem/D 把每一个钥匙拆成两个点${x,x+m}$,分别表示选不选这把钥匙. 我们知道一扇门一定对应了两把钥匙. ...
- VMware网络连接模式—桥接、NAT以及仅主机模式的详细介绍和区别
在使用VMware Workstation(以下简称:VMware)创建虚拟机的过程中,配置虚拟机的网络连接是非常重要的一环,当我们为虚拟机配置网络连接时,我们可以看到如下图所示的几种网络连接模式:桥 ...
- 使用外网访问阿里云服务器ZooKeeper
参考网址: zookeeper单机/集群安装详解 使用外网访问阿里云服务器ZooKeeper 阿里云服务管理控制台 1. 阿里云ECS安装zookeeper 环境:我安装的是zookeeper3.4. ...