专栏首页前端小叙vue select二级城市联动及第二级默认选中第一个option值

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"></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];
      },

2018.3.13 更新

后来新版本的iview select value的值不支持定义对象形式,所以会报错:

@change事件改为了@on-change 事件

于是换一个实现方法:

<FormItem label="国家" prop="country">
                <Row>
                    <Col span="7">
                    <Select v-model="formValidate.country" @on-change="selectCountry" placeholder="请选择国家">
                        <Option v-for="(item,index) in area" :value="item.country" :key="index">{{item.country}}</Option>
                    </Select>
                    </Col>
                    <Col span="17">
                    </Col>
                </Row>
            </FormItem>
            <FormItem label="城市" prop="city">
                <Row>
                    <Col span="7">
                    <Select v-model="formValidate.city"  placeholder="请选择城市">
                      <Option v-for="(item,index) in city" :value="item" :key="index">{{item}}</Option>
                    </Select>
                    </Col>
                    <Col span="17">
                    </Col>
                </Row>
            </FormItem>
data(){
    return {
        formValidate: { 
                    country:'',
                    city:'',
                },
        area:[
                {
                  "country":"美国",
                  "city":[
                    "纽约",
                    "洛杉矶",
                    "旧金山",
                    "西雅图",
                    "波士顿",
                    "休斯顿",
                    "圣地亚哥",
                    "芝加哥",
                    "其它",
                  ]
                },
                {
                  "country":"加拿大",
                  "city":[
                    "温哥华",
                    "多伦多",
                    "蒙特利尔",
                    "其它"
                  ]
                },
                {
                  "country":"澳大利亚",
                  "city":[
                    "悉尼",
                    "墨尔本",
                    "其它"
                  ]
                },
                {
                  "country":"新加坡",
                  "city":[
                    "新加坡"
                  ]
                },
                /*{
                 "country":"中国",
                 "city":[
                 "北京市",
                 ]
                 },*/
              ],
              city:[]
    }  
}
methods: {
            selectCountry(value){
                const _this=this;
                this.area.forEach(function (item,index) {
                    if(item.country==value){
                        _this.city=item.city;
                        _this.formValidate.city=_this.city[0];
                    }
                })
            }
        },

新定义一个数组存放被筛选出来的city列表,选择城市的时候遍历这个列表,通过选择国家改变该列表。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react文档demo实现输入展示搜索结果列表

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

    蓓蕾心晴
  • vue二级联动select

    <div> <span>所在区域</span> <select name="" v-model="country"> ...

    蓓蕾心晴
  • 纯css实现单张图片无限循环无缝滚动

    参考链接:https://blog.csdn.net/qq_20777797/article/details/77916029

    蓓蕾心晴
  • react文档demo实现输入展示搜索结果列表

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

    蓓蕾心晴
  • vue二级联动select

    <div> <span>所在区域</span> <select name="" v-model="country"> ...

    蓓蕾心晴
  • 测试思想-测试设计 授客细说场景测试用例设计与实践

    注:通常事件是操作触发的,和操作往往是一一对应的关系,所以,这里为了便于理解,暂且把“操作”名称,称为事件名。

    授客
  • [转自JeffreyZhao]在LINQ to SQL中使用Translate方法以及修改查询用SQL

    目前LINQ to SQL的资料不多——老赵的意思是,目前能找到的资料都难以摆脱“官方用法”的“阴影”。LINQ to SQL最权威的资料自然是MSDN,但是M...

    菩提树下的杨过
  • Java常用事件监听器与实例分析

    今天来和大家总结一下有关在进行Java的GUI编程时常用的事件监听函数的基本作用和功能。

    灰小猿
  • C#内存映射文件消息队列实战演练(MMF—MQ)

    2.6、什么是内存映射文件消息队列(Memory-Mapped File—MQ)?

    跟着阿笨一起玩NET
  • DB2 Linux平台安装 Part 3 实例的建立与配置

    注意必须事先建立db2inst1 和db2fenc1用户 实例名称极为db2inst1

    bsbforever

扫码关注云+社区

领取腾讯云代金券