<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. 用Proxy进行预处理

    如果你学过我的Vue的课程,一定会知道钩子函数,那如果你刚接触我的博客,并没有学习Vue,那我这里给你简单解释一下什么是钩子函数.当我们在操作一个对象或者方法时会有几种动作,比如:在运行函数前初始化一 ...

  2. [implements] - 一个接口的使用

    4种货物,如何使用一个接口实现CRUD: package com.tansuo365.test1.service.goods; import com.tansuo365.test1.entity.Go ...

  3. oogle advertiser api开发概述——速率限制

    速率限制 为了向遍布全球的 AdWords API 用户提供可靠的服务,我们使用令牌桶算法来衡量请求数并确定每秒查询数 (QPS) 速率.这样做的目的是阻止恶意的或不可控的软件大量入侵 AdWords ...

  4. Nuget 打包 for .Net Standart project

    Create .NET Standard packages with Visual Studio 2015 Publishing packages nuge.exe 放在项目目录中 nuget spe ...

  5. Docker4之Stack

    Make sure you have published the friendlyhello image you created by pushing it to a registry. We’ll ...

  6. 使用explain来分析SQL语句实现优化SQL语句

    用法:explain sql 作用:用于分析sql语句 mysql> explain select * from quser_1 where loginemail = "quctest ...

  7. SpringLog4j日志体系实现方式

    1.通过web.xml读取log4j配置文件内容 2.通过不同的配置信息,来实现不同的业务输出,注意:log4j可以写入tomcat容器,也可以写入缓存,通过第三方平台读取 #输入规则#log4j.r ...

  8. python 移动文件夹

    xxx@ddd:~$ mkdir testa testb >>> import shutil >>> shutil.move("/home/xxx/tes ...

  9. 《剑指offer》第五十六题(数组中只出现一次的两个数字)

    // 面试题56(一):数组中只出现一次的两个数字 // 题目:一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序 // 找出这两个只出现一次的数字.要求时间复杂度是O(n),空间复杂度 ...

  10. Lua和C++交互 学习记录之五:全局数组交互

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...