zoukankan      html  css  js  c++  java
  • 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列表,选择城市的时候遍历这个列表,通过选择国家改变该列表。

  • 相关阅读:
    遗产继承骗局
    Nginx配置https和wss
    Servlet乱码问题
    logback+slf4j作为日志系统
    InteliJ Idea通过maven创建webapp
    pip安装注意事项
    [转]TCP(HTTP)长连接和短连接区别和怎样维护长连接
    Python Socket编程初探
    有用的git片段
    Python使用chardet包自动检测编码
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/8252153.html
Copyright © 2011-2022 走看看