本文主要为大家分享一篇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"> {{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> </p>
data countryname:{}, cityname:"请选择城市", area:[ { "country":"美国", "city":[ "纽约", "洛杉矶", "旧金山", "西雅图", "波士顿", "休斯顿", "圣地亚哥", "芝加哥", "其它", ] }, { "country":"加拿大", "city":[ "温哥华", "多伦多", "蒙特利尔", "其它" ] }, { "country":"澳大利亚", "city":[ "悉尼", "墨尔本", "其它" ] }, { "country":"新加坡", "city":[ "新加坡" ] }, /*{ "country":"中国", "city":[ "北京市", ] },*/ ],
methods:
selectcountry(value){ this.cityname=this.countryname.city[0]; },
相关推荐：
js实现html中select二级联动实例分享
如何实现select select二级联动效果
最简单js代码实现select二级联动下拉菜单_javascript技巧
以上就是vue select二级联动第二级默认选中第一个option值的详细内容。