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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
原生js简单实现放大镜特效
May 16 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
js实现简单音乐播放器
2020/06/30 Javascript
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
中学生个人自我评价
2014/02/06 职场文书
迎新晚会主持词
2014/03/24 职场文书
党支部公开承诺书
2014/03/28 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
假释思想汇报范文
2014/10/11 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
服务承诺书
2015/01/19 职场文书