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

发布于 2019-11-05 作者 风铃 94次 浏览 版块 前端

这篇文章主要为大家详细介绍了vue select二级联动第二级默认选中第一个option值的实例,具有一定的参考价值,可以用来参考一下。

当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的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];
      },
收藏
暂无回复