<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实现省,市,提交后,默认显示省,市信息的更多相关文章

  1. vue.js学习之 打包为生产环境后,页面为白色

    vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...

  2. 设置vue启动项目后默认显示的页面

    通过配置路由,可以设置vue项目启动后默认显示的页面.路由的path设置为path:"/",启动项目后就会显示默认的组件页面. import Vue from 'vue' impo ...

  3. vue.js中 ,回车键实现登录或者提交表单!

    vue的功能非常强大,但是我们作为一个后端开发人员,前端的东西不一定都弄的很明白,今天就给大家介绍一个回车提交表单的真实案例,达到回车登录的效果! @ keyup.enter 实现的效果 <in ...

  4. Vue.js,select中的option用ajax想循环控制值的显示 v-model可以实现但提示报错,这是为什么?

    应该将v-model换成:value,因为v-model只能绑定一个值,无法绑定多个值 <select v-model="citys">       <optio ...

  5. jquery 纯JS设置select下拉框,并默认选中第一个

    //html页面<select id="payWay" class="easyui-combobox" name="payWay" s ...

  6. js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div

    预期效果: 1.点击Save按钮,创建及显示loading div框 2.Save操作完成后,再删除loading 及弹出提示结果 <html> <head> </hea ...

  7. vue.js中,如何把text按html格式化显示

    先说方法:v-html = "你的字符串" <el-table-column type="expand" label="详情" hea ...

  8. form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault

    出错点:确认按钮上.加onclick事件.每次点击都会追加给form追加on监听方法.累加on方法,重复提交 suppress_exception:true 阻止异常 (百度推送 jdk) 向下按 p ...

  9. Vue.js 相关知识(基础)

    1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...

随机推荐

  1. WSL及Linux入门

    win10内置linux子系统(Windows Subsystem for Linux),可以不用安装Vmware等虚拟机学习linux啦. wsl开启方式 设置打开开发人员模式. 控制面板-程序和功 ...

  2. (转载)C#:Enum、Int和String的互相转换,枚举转换

    Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举.注意:枚举类型的基类 ...

  3. 转载:避免重复插入,更新的sql

    本文章来给大家提供三种在mysql中避免重复插入记录方法,主要是讲到了ignore,Replace,ON DUPLICATE KEY UPDATE三种方法,各位同学可尝试参考. 案一:使用ignore ...

  4. 17秋 软件工程 团队第三次作业 预则立&他山之石

    题目:团队作业-预则立&&他山之石 团队: 我说嘻(xì)哈(hà)你说侠 17秋 软件工程 团队第三次作业 预则立&他山之石 1.确立团队选题,建立和初步熟悉团队git的协作 ...

  5. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  6. 正则表达式 & re

    本节主要内容: 1.正则表达式 2.re模块的使用 一.正则表达式 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE), 计算机 ...

  7. JqGrid 列时间格式化

    {name:'createTime',index:'createTime',label:"创建时间", editable:false,formatter:"date&qu ...

  8. live2d+cocos2dx示例工程

    环境 : win10 64bit visual studio 2013 cocos2d-x-3.9 Live2D_SDK_OpenGL_2.0.06_2_sample_3.3_en 首先安装visua ...

  9. idea输出目录详解

    引言:在项目中遇到了一个问题,在使用idea时,项目中Tomcat的虚拟目录映射总是失败,而当我采用myeclipse时却能映射过去. 自己花费了很长时间,终于找出了问题所在,原来是由于idea自己采 ...

  10. C# 使用 protobuf 进行对象序列化与反序列化

    protobuf 是 google的一个开源项目,可用于以下两种用途: (1)数据的存储(序列化和反序列化),类似于xml.json等: (2)制作网络通信协议. 源代码下载地址:https://gi ...