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

本文主要为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。


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





<p class="inputLine">

  <span>所在区域</span>

  <select name="" v-model="countryName" @change="selectCountry">

  <option :value="item" v-for="(item,index) in area">

  pw_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">

  pw_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>

 </p>










data countryName:{},

  cityName:"请选择城市",

  area:[

   {

   "country":"美国",

   "city":[

    "纽约",

    "洛杉矶",

    "旧金山",

    "西雅图",

    "波士顿",

    "休斯顿",

    "圣地亚哥",

    "芝加哥",

    "其它",

   ]

   },

   {

   "country":"加拿大",

   "city":[

    "温哥华",

    "多伦多",

    "蒙特利尔",

    "其它"

   ]

   },

   {

   "country":"澳大利亚",

   "city":[

    "悉尼",

    "墨尔本",

    "其它"

   ]

   },

   {

   "country":"新加坡",

   "city":[

    "新加坡"

   ]

   },

   /*{

   "country":"中国",

   "city":[

   "北京市",

   ]

   },*/

  ],


methods:





selectCountry(value){

  this.cityName=this.countryName.city[0];

  },

http://www.php.cn/js-tutorial-384623.html