1. <template>
  2. <div id="body" class="application" v-show="show" v-cloak>
  3. <div class="applicationForm">
  4. <div class="essentialInformation">
  5. <ul>
  6. <li>
  7. <div class="agencyNamjian fr">
  8. <img src="../assets/img/xiala.png" width="100%" height="100%" />
  9. </div>
  10. <div class="agencyName agencyJantou">
  11.                           <span class="plaseCity" v-show="plaseCityShow" v-text="plaseProvinceText"></span>
  12.   <select v-model='provinceSelect' @change ="cityChange(1)">
  13. <option v-for="(item,index) in application.province" :key="index" :value="item.id" v-text="item.title"></option>
  14.   </select>
  15. </div>
  16. </li>
  17. <li>
  18. <div class="agencyNamjian fr">
  19. <img src="../assets/img/xiala.png" width="100%" height="100%" />
  20. </div>
  21. <div class="agencyName agencyJantou">
  22.                             <span class="plaseCity" v-show="plaseCityShow" v-text="plaseCityText"></span>
  23. <select v-model="citySelect" @change="cityChange(2)">
  24.                             <option v-for="(item,index) in city" :key="index" :value="item.id" v-text="item.title"></option>
  25. </select>
  26. </div>
  27. </li>
  28. <li>
  29. <div class="agencyNamjian fr ">
  30. <img src="../assets/img/xiala.png" width="100%" height="100%" />
  31. </div>
  32. <div class="agencyName agencyJantou noBorder">
  33.                             <span class="plaseCity" v-show="plaseCityShow" v-text="plaseCountyText"></span>
  34. <select v-model="countySelect">
  35.                             <option v-for="(item,index) in county" :key="index" :value="item.id" v-text="item.title"></option>
  36. </select>
  37. </div>
  38. </li>
  39. </ul>
  40. </div>
  41. </div>
  42. </div>
  43. </template>
  44. <script>
  45. export default {
  46. name: 'application',
  47. data () {
  48. return {
  49. show: false,
  50. application: {
  51. province: [],
  52. city: {},
  53. county: {}
  54. },
  55. city: [],
  56. county: [],
  57. provinceSelect: '',
  58. citySelect: '',
  59. countySelect: '',
  60. tishi: false,
  61. tishiTxt: '',
  62. plaseCityShow: true,
  63. plaseCityText: '请子选择城市',
  64. plaseProvinceText: '请选择城市',
  65. plaseCountyText: '请选择(区)县'
  66. }
  67. },
  68. methods: {
  69. verify: function () {
  70. let thisObj = this
  71. this.$chaos.setTitle('报名表单')
  72. this.$chaos.verify(function () {
  73. thisObj.$chaos.ajax({
  74. data: {
  75. pid: '0'
  76. },
  77. slient: true,
  78. userinfo: true,
  79. url: 'get_address_by_pid',
  80. callback: function (type, res) {
  81. if (type !== 'success') {
  82. return
  83. }
  84. if (res.status) {
  85. thisObj.application.province = res.info.region_list
  86. thisObj.show = true
  87. } else {
  88. thisObj.$vux.toast.show({
  89. text: res.msg,
  90. type: 'text',
  91. position: 'bottom'
  92. })
  93. }
  94. }
  95. })
  96. thisObj.$chaos.ajax({
  97. slient: true,
  98. userinfo: true,
  99. url: 'user_is_sign',
  100. callback: function (type, res) {
  101. if (type !== 'success') {
  102. return
  103. }
  104. if (res.status) {
  105. let userInfo = thisObj.$chaos.getUserInfo()
  106. if (userInfo.user_info.is_sign === 1) {
  107. window.location.href = '#/CourseList'
  108. } else {
  109. userInfo.user_info.is_buy_course = 1
  110. thisObj.$chaos.setUserInfo(userInfo)
  111. }
  112. } else {
  113. thisObj.$vux.toast.show({
  114. text: res.msg,
  115. type: 'text',
  116. position: 'bottom'
  117. })
  118. }
  119. }
  120. })
  121. }, false)
  122. },
  123. cityChange: function (type) {
  124. let thisObj = this
  125. if (type === 1) {
  126. if (thisObj.provinceSelect === '' || typeof thisObj.provinceSelect === 'undefined') {
  127. return
  128. }
  129. if (typeof thisObj.application.city[thisObj.provinceSelect] === 'undefined') {
  130. thisObj.plaseCityShow = false
  131. thisObj.$chaos.ajax({
  132. data: {
  133. pid: thisObj.provinceSelect
  134. },
  135. slient: true,
  136. userinfo: true,
  137. url: 'Attend/get_address_by_pid',
  138. callback: function (type, res) {
  139. if (type !== 'success') {
  140. return
  141. }
  142. if (res.status) {
  143. thisObj.application.city[thisObj.provinceSelect] = res.info.region_list
  144. thisObj.city = res.info.region_list
  145. thisObj.citySelect = thisObj.city[0]['id']
  146. } else {
  147. thisObj.$vux.toast.show({
  148. text: res.msg,
  149. type: 'text',
  150. position: 'bottom'
  151. })
  152. }
  153. }
  154. })
  155. } else {
  156. thisObj.city = thisObj.application.city[thisObj.provinceSelect]
  157. thisObj.citySelect = thisObj.city[0]['id']
  158. }
  159. } else {
  160. if (thisObj.city === '' || typeof thisObj.city === 'undefined') {
  161. return
  162. } else {
  163. if (typeof thisObj.application.county[thisObj.city] === 'undefined') {
  164. thisObj.$chaos.ajax({
  165. data: {
  166. pid: thisObj.citySelect
  167. },
  168. slient: true,
  169. userinfo: true,
  170. url: 'Attend/get_address_by_pid',
  171. callback: function (type, res) {
  172. if (type !== 'success') {
  173. return
  174. }
  175. if (res.status) {
  176. thisObj.application.county[thisObj.citySelect] = res.info.region_list
  177. thisObj.county = res.info.region_list
  178. thisObj.countySelect = thisObj.county[0]['id']
  179. } else {
  180. thisObj.$vux.toast.show({
  181. text: res.msg,
  182. type: 'text',
  183. position: 'bottom'
  184. })
  185. }
  186. }
  187. })
  188. } else {
  189. thisObj.county = thisObj.application.county[thisObj.citySelect]
  190. thisObj.countySelect = thisObj.county[0]['id']
  191. }
  192. }
  193. }
  194. }
  195. },
  196. created: function () {
  197. this.verify()
  198. },
  199. watch: {
  200. '$route': 'verify'
  201. }
  202. }
  203. </script>
  204. <style scoped>
  205. [v-cloak] {
  206. display: none;
  207. }
  208. .plaseCity{
  209. position: absolute;
  210. top:0;
  211. left:0;
  212. right:0;
  213. bottom:0;
  214. line-height: 55px;
  215. text-indent: 10px;
  216. }
  217. .essentialInformation, .importaInformation {
  218. background: #FFFFFF;
  219. }
  220. .essentialInformation {
  221. margin: 10px 0;
  222. }
  223. .essentialInformation ul, .importaInformation ul {
  224. margin: 0 15px;
  225. }
  226. .agencyNameImg {
  227. width: 20px;
  228. height: 20px;
  229. line-height: 4.3;
  230. }
  231. .fl {
  232. float: left;
  233. }
  234. .noBorder {
  235. border: 0;
  236. }
  237. .essentialInformation:after {
  238. content: '';
  239. display: block;
  240. clear: both;
  241. }
  242. .agencyNamjian {
  243. width: 11px;
  244. height: 8px;
  245. line-height: 4.3;
  246. }
  247. .agencyJantou {
  248. padding-right: 40px;
  249. position: relative;
  250. }
  251. .agencyName {
  252. margin-left: 30px;
  253. border-bottom: 1px solid #cccccc;
  254. line-height: 3.8
  255. }
  256. .essentialInformation input, .essentialInformation select {
  257. width: 100%;
  258. text-indent: 10px;
  259. border: 0;
  260. -webkit-appearance: none;
  261. background: transparent;
  262. }
  263. .essentialInformation select {
  264. height: 55px;
  265. position: relative;
  266. z-index: 0;
  267. }
  268. .agencyBut {
  269. margin-top: 100px;
  270. }
  271. .squadButton {
  272. text-align: center;
  273. color: #fff;
  274. background: #fbac36;
  275. margin: 0 30px;
  276. line-height: 2.5;
  277. font-size: 16px;
  278. box-shadow: 0px 1px 5px #ccc;
  279. }
  280. .agencyBut {
  281. margin-top: 100px;
  282. }
  283.  
  284. </style>

  

vue select的change事件,将点击过的城市名存在数组中,下次调用不需要再调用接口的更多相关文章

  1. vue select框change事件

    vue Select 中< :label-in-value="true" @on-change="satusSelect"> satusSelect ...

  2. 关于element-ui select组件change事件只要数据变化就会触发的解决办法

    使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中 ...

  3. jquery 怎么触发select的change事件

    可以使用jQuery的trigger() 方法来响应事件 定义和用法 trigger() 方法触发被选元素的指定事件类型. 语法 $(selector).trigger(event,[param1,p ...

  4. elementUI下拉框select组件change事件用法

    <el-select-custom clearable collapse-tags v-model="searchForm.cardTypeList" @change=&qu ...

  5. js改变select的选中项不触发select的change事件

    // test var selectEl = document.querySelector('select') var buttonEl = document.querySelector('butto ...

  6. layui中select的change事件、动态追加option

    说明:layui中用jquery 中的选择器例如$('#id').change(function(){})发现不起作用 layui操作:lay-felter标识操作哪个select html部分: & ...

  7. jquery操作select标签change事件

    $('#update_supply_id').on('change',function(){//判断是否选取prompt属性,无返回值: if($(this).val()){ var selectTe ...

  8. (转载)Unity 关于动态监听时,点击Button,返回其在数组中的下标

    其实是绕了一圈,把数组里的元素放进数组列表里再读取它的下标 using System.Collections; using System.Collections.Generic; using Unit ...

  9. select控件自动触发change事件

    这里接上面的二级联动.背景:当页面跳转到修改页面时,需要首先绑定学院和专业.这就需要在页面加载时触发select的change事件,具体用trigger函数进行实现.代码如下. $("#xs ...

随机推荐

  1. 比酒量|2012年蓝桥杯B组题解析第三题-fishers

    (5')比酒量 有一群海盗(不多于20人),在船上比拼酒量.过程如下:打开一瓶酒,所有在场的人平分喝下,有几个人倒下了.再打开一瓶酒平分,又有倒下的,再次重复...... 直到开了第4瓶酒,坐着的已经 ...

  2. DownAlbum:Chrome的pinterest批量下载插件

    一.DownAlbum安装 二.DownAlbum使用 点击DownAlbum图标. 选择Normal. 会出现一个加载的弹窗,等待片刻会打开一个新的窗口. 按Ctrl+S,即可保存相册所有图片. 图 ...

  3. Git回顾

    抄自廖雪峰的官方网站 完整图文请访问https://github.com/Mrlution/study/tree/master/git 关于repository 我认为repository是一个存放代 ...

  4. 6、tcp_wrapper

    iptables的链接跟踪表最大容量为/proc/sys/net/ipv4/ip_conntrack_max,链接碰到各种状态的超时后就会从表中删除. 所以解決方法一般有两个: (1) 加大 ip_c ...

  5. [0406]学习一个——Unit 1 Html、CSS与版本控制

    前言 最近发现了Github的Student认证,本来想用来注册Digital Ocean搭个梯子,结果注册验证不能用VISA借记卡=~=. 那么在这漫长的清明节假期里,只有学习能满足空虚的内心(划掉 ...

  6. HDU 5119 Happy Matt Friends(递推)

    http://acm.hdu.edu.cn/showproblem.php?pid=5119 题意:给出n个数和一个上限m,求从这n个数里取任意个数做异或运算,最后的结果不小于m有多少种取法. 思路: ...

  7. python接口测试模版

    """Test case implementation""" import sys import functools import diff ...

  8. 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 ...

  9. 【Java】【控制流程】

    #栗子 丢手帕 & 菱形 & 金字塔import java.io.*;import java.util.*; public class Test_one { public static ...

  10. React native 开发如何使用阿里的icon

    首先是通过Text来引用的 但是区分是 familay <Text style={{fontFamily:'iconfont', fontSize:fontsize, color:this.st ...