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

2018-01-09 19:45:48来源:cnblogs.com作者:蓓蕾心晴人点击

分享

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

微信扫一扫

第七城市微信公众平台