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的Date方法实现代码(prototype)
Nov 20 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
vue判断按钮是否可以点击
Apr 09 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计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
浅析node.js中close事件
2014/11/26 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
js实现碰撞检测
2021/01/29 Javascript
python实现简单神经网络算法
2018/03/10 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
django model object序列化实例
2020/03/13 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
现场施工员岗位职责
2014/03/10 职场文书
药学职务聘任书
2014/03/29 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
导游词之介休绵山
2019/12/31 职场文书