vue select的change事件,将点击过的城市名存在数组中,下次调用不需要再调用接口
- <template>
- <div id="body" class="application" v-show="show" v-cloak>
- <div class="applicationForm">
- <div class="essentialInformation">
- <ul>
- <li>
- <div class="agencyNamjian fr">
- <img src="../assets/img/xiala.png" width="100%" height="100%" />
- </div>
- <div class="agencyName agencyJantou">
- <span class="plaseCity" v-show="plaseCityShow" v-text="plaseProvinceText"></span>
- <select v-model='provinceSelect' @change ="cityChange(1)">
- <option v-for="(item,index) in application.province" :key="index" :value="item.id" v-text="item.title"></option>
- </select>
- </div>
- </li>
- <li>
- <div class="agencyNamjian fr">
- <img src="../assets/img/xiala.png" width="100%" height="100%" />
- </div>
- <div class="agencyName agencyJantou">
- <span class="plaseCity" v-show="plaseCityShow" v-text="plaseCityText"></span>
- <select v-model="citySelect" @change="cityChange(2)">
- <option v-for="(item,index) in city" :key="index" :value="item.id" v-text="item.title"></option>
- </select>
- </div>
- </li>
- <li>
- <div class="agencyNamjian fr ">
- <img src="../assets/img/xiala.png" width="100%" height="100%" />
- </div>
- <div class="agencyName agencyJantou noBorder">
- <span class="plaseCity" v-show="plaseCityShow" v-text="plaseCountyText"></span>
- <select v-model="countySelect">
- <option v-for="(item,index) in county" :key="index" :value="item.id" v-text="item.title"></option>
- </select>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'application',
- data () {
- return {
- show: false,
- application: {
- province: [],
- city: {},
- county: {}
- },
- city: [],
- county: [],
- provinceSelect: '',
- citySelect: '',
- countySelect: '',
- tishi: false,
- tishiTxt: '',
- plaseCityShow: true,
- plaseCityText: '请子选择城市',
- plaseProvinceText: '请选择城市',
- plaseCountyText: '请选择(区)县'
- }
- },
- methods: {
- verify: function () {
- let thisObj = this
- this.$chaos.setTitle('报名表单')
- this.$chaos.verify(function () {
- thisObj.$chaos.ajax({
- data: {
- pid: '0'
- },
- slient: true,
- userinfo: true,
- url: 'get_address_by_pid',
- callback: function (type, res) {
- if (type !== 'success') {
- return
- }
- if (res.status) {
- thisObj.application.province = res.info.region_list
- thisObj.show = true
- } else {
- thisObj.$vux.toast.show({
- text: res.msg,
- type: 'text',
- position: 'bottom'
- })
- }
- }
- })
- thisObj.$chaos.ajax({
- slient: true,
- userinfo: true,
- url: 'user_is_sign',
- callback: function (type, res) {
- if (type !== 'success') {
- return
- }
- if (res.status) {
- let userInfo = thisObj.$chaos.getUserInfo()
- if (userInfo.user_info.is_sign === 1) {
- window.location.href = '#/CourseList'
- } else {
- userInfo.user_info.is_buy_course = 1
- thisObj.$chaos.setUserInfo(userInfo)
- }
- } else {
- thisObj.$vux.toast.show({
- text: res.msg,
- type: 'text',
- position: 'bottom'
- })
- }
- }
- })
- }, false)
- },
- cityChange: function (type) {
- let thisObj = this
- if (type === 1) {
- if (thisObj.provinceSelect === '' || typeof thisObj.provinceSelect === 'undefined') {
- return
- }
- if (typeof thisObj.application.city[thisObj.provinceSelect] === 'undefined') {
- thisObj.plaseCityShow = false
- thisObj.$chaos.ajax({
- data: {
- pid: thisObj.provinceSelect
- },
- slient: true,
- userinfo: true,
- url: 'Attend/get_address_by_pid',
- callback: function (type, res) {
- if (type !== 'success') {
- return
- }
- if (res.status) {
- thisObj.application.city[thisObj.provinceSelect] = res.info.region_list
- thisObj.city = res.info.region_list
- thisObj.citySelect = thisObj.city[0]['id']
- } else {
- thisObj.$vux.toast.show({
- text: res.msg,
- type: 'text',
- position: 'bottom'
- })
- }
- }
- })
- } else {
- thisObj.city = thisObj.application.city[thisObj.provinceSelect]
- thisObj.citySelect = thisObj.city[0]['id']
- }
- } else {
- if (thisObj.city === '' || typeof thisObj.city === 'undefined') {
- return
- } else {
- if (typeof thisObj.application.county[thisObj.city] === 'undefined') {
- thisObj.$chaos.ajax({
- data: {
- pid: thisObj.citySelect
- },
- slient: true,
- userinfo: true,
- url: 'Attend/get_address_by_pid',
- callback: function (type, res) {
- if (type !== 'success') {
- return
- }
- if (res.status) {
- thisObj.application.county[thisObj.citySelect] = res.info.region_list
- thisObj.county = res.info.region_list
- thisObj.countySelect = thisObj.county[0]['id']
- } else {
- thisObj.$vux.toast.show({
- text: res.msg,
- type: 'text',
- position: 'bottom'
- })
- }
- }
- })
- } else {
- thisObj.county = thisObj.application.county[thisObj.citySelect]
- thisObj.countySelect = thisObj.county[0]['id']
- }
- }
- }
- }
- },
- created: function () {
- this.verify()
- },
- watch: {
- '$route': 'verify'
- }
- }
- </script>
- <style scoped>
- [v-cloak] {
- display: none;
- }
- .plaseCity{
- position: absolute;
- top:0;
- left:0;
- right:0;
- bottom:0;
- line-height: 55px;
- text-indent: 10px;
- }
- .essentialInformation, .importaInformation {
- background: #FFFFFF;
- }
- .essentialInformation {
- margin: 10px 0;
- }
- .essentialInformation ul, .importaInformation ul {
- margin: 0 15px;
- }
- .agencyNameImg {
- width: 20px;
- height: 20px;
- line-height: 4.3;
- }
- .fl {
- float: left;
- }
- .noBorder {
- border: 0;
- }
- .essentialInformation:after {
- content: '';
- display: block;
- clear: both;
- }
- .agencyNamjian {
- width: 11px;
- height: 8px;
- line-height: 4.3;
- }
- .agencyJantou {
- padding-right: 40px;
- position: relative;
- }
- .agencyName {
- margin-left: 30px;
- border-bottom: 1px solid #cccccc;
- line-height: 3.8
- }
- .essentialInformation input, .essentialInformation select {
- width: 100%;
- text-indent: 10px;
- border: 0;
- -webkit-appearance: none;
- background: transparent;
- }
- .essentialInformation select {
- height: 55px;
- position: relative;
- z-index: 0;
- }
- .agencyBut {
- margin-top: 100px;
- }
- .squadButton {
- text-align: center;
- color: #fff;
- background: #fbac36;
- margin: 0 30px;
- line-height: 2.5;
- font-size: 16px;
- box-shadow: 0px 1px 5px #ccc;
- }
- .agencyBut {
- margin-top: 100px;
- }
- </style>
vue select的change事件,将点击过的城市名存在数组中,下次调用不需要再调用接口的更多相关文章
- vue select框change事件
vue Select 中< :label-in-value="true" @on-change="satusSelect"> satusSelect ...
- 关于element-ui select组件change事件只要数据变化就会触发的解决办法
使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中 ...
- jquery 怎么触发select的change事件
可以使用jQuery的trigger() 方法来响应事件 定义和用法 trigger() 方法触发被选元素的指定事件类型. 语法 $(selector).trigger(event,[param1,p ...
- elementUI下拉框select组件change事件用法
<el-select-custom clearable collapse-tags v-model="searchForm.cardTypeList" @change=&qu ...
- js改变select的选中项不触发select的change事件
// test var selectEl = document.querySelector('select') var buttonEl = document.querySelector('butto ...
- layui中select的change事件、动态追加option
说明:layui中用jquery 中的选择器例如$('#id').change(function(){})发现不起作用 layui操作:lay-felter标识操作哪个select html部分: & ...
- jquery操作select标签change事件
$('#update_supply_id').on('change',function(){//判断是否选取prompt属性,无返回值: if($(this).val()){ var selectTe ...
- (转载)Unity 关于动态监听时,点击Button,返回其在数组中的下标
其实是绕了一圈,把数组里的元素放进数组列表里再读取它的下标 using System.Collections; using System.Collections.Generic; using Unit ...
- select控件自动触发change事件
这里接上面的二级联动.背景:当页面跳转到修改页面时,需要首先绑定学院和专业.这就需要在页面加载时触发select的change事件,具体用trigger函数进行实现.代码如下. $("#xs ...
随机推荐
- 比酒量|2012年蓝桥杯B组题解析第三题-fishers
(5')比酒量 有一群海盗(不多于20人),在船上比拼酒量.过程如下:打开一瓶酒,所有在场的人平分喝下,有几个人倒下了.再打开一瓶酒平分,又有倒下的,再次重复...... 直到开了第4瓶酒,坐着的已经 ...
- DownAlbum:Chrome的pinterest批量下载插件
一.DownAlbum安装 二.DownAlbum使用 点击DownAlbum图标. 选择Normal. 会出现一个加载的弹窗,等待片刻会打开一个新的窗口. 按Ctrl+S,即可保存相册所有图片. 图 ...
- Git回顾
抄自廖雪峰的官方网站 完整图文请访问https://github.com/Mrlution/study/tree/master/git 关于repository 我认为repository是一个存放代 ...
- 6、tcp_wrapper
iptables的链接跟踪表最大容量为/proc/sys/net/ipv4/ip_conntrack_max,链接碰到各种状态的超时后就会从表中删除. 所以解決方法一般有两个: (1) 加大 ip_c ...
- [0406]学习一个——Unit 1 Html、CSS与版本控制
前言 最近发现了Github的Student认证,本来想用来注册Digital Ocean搭个梯子,结果注册验证不能用VISA借记卡=~=. 那么在这漫长的清明节假期里,只有学习能满足空虚的内心(划掉 ...
- HDU 5119 Happy Matt Friends(递推)
http://acm.hdu.edu.cn/showproblem.php?pid=5119 题意:给出n个数和一个上限m,求从这n个数里取任意个数做异或运算,最后的结果不小于m有多少种取法. 思路: ...
- python接口测试模版
"""Test case implementation""" import sys import functools import diff ...
- git Bush应用崩溃If no other git process is currently running, this probably means a git process crashed
问题: 用git Bush提交的时候遇到一个问题,不论做什么操作都遇到下面的错误信息: fatal: Unable to create 'XXXXXXXXX' : File exists. If no ...
- 【Java】【控制流程】
#栗子 丢手帕 & 菱形 & 金字塔import java.io.*;import java.util.*; public class Test_one { public static ...
- React native 开发如何使用阿里的icon
首先是通过Text来引用的 但是区分是 familay <Text style={{fontFamily:'iconfont', fontSize:fontsize, color:this.st ...