vue select二级联动第二级默认选中第一个option值的实例


Posted in Javascript onJanuary 10, 2018

当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了

<div class="inputLine">
  <span>所在区域</span>
  <select name="" v-model="countryName" @change="selectCountry">
  <option :value="item" v-for="(item,index) in area">
  {{item.country}}
  <svg class="icon icon-arrow-bottom" aria-hidden="true">
  <use xlink:href="#icon-arrow-bottom" rel="external nofollow" rel="external nofollow" ></use>
  </svg>
  </option>
  </select>
  <select name="" v-model="cityName">
  <option :value="item" v-for="(item,index) in countryName.city">
  {{item}}
  <svg class="icon icon-arrow-bottom" aria-hidden="true">
  <use xlink:href="#icon-arrow-bottom" rel="external nofollow" rel="external nofollow" ></use>
  </svg>
  </option>
  </select>
 </div>
data
  countryName:{},
  cityName:"请选择城市",
  area:[
   {
   "country":"美国",
   "city":[
    "纽约",
    "洛杉矶",
    "旧金山",
    "西雅图",
    "波士顿",
    "休斯顿",
    "圣地亚哥",
    "芝加哥",
    "其它",
   ]
   },
   {
   "country":"加拿大",
   "city":[
    "温哥华",
    "多伦多",
    "蒙特利尔",
    "其它"
   ]
   },
   {
   "country":"澳大利亚",
   "city":[
    "悉尼",
    "墨尔本",
    "其它"
   ]
   },
   {
   "country":"新加坡",
   "city":[
    "新加坡"
   ]
   },
   /*{
   "country":"中国",
   "city":[
   "北京市",
   ]
   },*/
  ],

methods:

selectCountry(value){
  this.cityName=this.countryName.city[0];
  },

以上这篇vue select二级联动第二级默认选中第一个option值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript delete 使用示例代码
Mar 29 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 #Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 #Javascript
10个经典的网页鼠标特效代码
Jan 09 #Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 #Javascript
JavaScript实现多重继承的方法分析
Jan 09 #Javascript
webpack多入口文件页面打包配置详解
Jan 09 #Javascript
You might like
用户的详细注册和判断
2006/10/09 PHP
php显示时间常用方法小结
2015/06/05 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python抽象类的新写法
2015/06/18 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
详解Python 解压缩文件
2019/04/09 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python 实现单通道转3通道
2019/12/03 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
vue项目实现分页效果
2021/03/24 Vue.js
社区工作者先进事迹
2014/01/18 职场文书
晨会主持词
2014/03/17 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
西安导游词
2015/02/12 职场文书
学生会个人总结范文
2015/02/15 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python