Vue -- 配合iView实现省市二级联动

在实现省市二级联动时，如果省份和城市写在一个数组对象中。可以根据，点击某个省份时获取到目标省份的id 是否同数组中的某个对象id一致来判断

iView中的on-change事件

on-change事件：即选中的Option变化时触发，默认返回 value。（value在这里只支持String和Number类型）

HTML部分

<template><Form ref="formValidate" :model="formValidate" :rules="ruleValidate"><FormItem prop="province" label="省份"><Select v-model="formValidate.province" placeholder="请选择城市" @on-change="change"><Option v-for="item in provinceArr" :key="item.id" :value="item.id" >{{ item.name}}</Option></Select></FormItem><FormItem prop="city" label="城市"><Select v-model="formValidate.city" placeholder="请选择省份"><Option v-for="item in cities" :key="item.id" :value="item.id" >{{ item.name}}</Option></Select></FormItem></Form>
</template>

JS主要部分

<script>export default{data(){return {provinceArr: [{id:1,name:"北京市",cities:[{id:11,name:"北京市"}]},{id:2,name:"天津市",cities:[{id:12,name:"天津市"} ]},{id:3,name:"上海市",cities:[ {id:13,name:"上海市"} ]}],cities: "",formValidate:...,ruleValidate:...}},methods:{ //主要代码change(val){for(var i=0; i<this.provinceArr.length; i++){if(val == this.provinceArr[i].id ){this.cities = this.provinceArr[i].cities;}}}}}
</script>

Vue -- 配合iView实现省市二级联动相关推荐

vue实现省市二级联动
1.定义两个select选项框,一个存放以及下拉列表,一个存放联动下拉列表.  <el-form-item label="选择省份:&q ...
android省市二级联动的实现
因为工作的关系,需要做一个省市二级联动. 1.首先,实现这个功能所用到的控件是android 的spinner 2.要做一个省市二级联动,首先我们要有所有省及其主要城市的数据,这里我给一个我的百度云的 ...
JavaScript实现省市二级联动
JavaScript实现省市二级联动展示一下效果? 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市实现思路 1. 添加相对应的select容器 2. 然后添加数据 3. ...
使用js、jquery完成省市二级联动
2019独角兽企业重金招聘Python工程师标准>>> 使用js完成省市二级联动 <!DOCTYPE html> <html><head>< ...
html省市多级联动下拉框,基于javascript实现全国省市二级联动下拉选择菜单
本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: 无标题文档 //好像不是这样子 var arr_province = ["请选择省 ...
微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接由于项目需 ...
JS省市二级联动菜单,sky整理收集。
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
省市二级联动数据库生成代码（JAVA）
最近在给一客户做网站,用的是php,现在需要有一个下拉框选择省市,并且需要保存省市的简拼,如"河北 HB".我在网上找了半天,发现基本没有符合要求的代码,于是自己顶着浪费巨大时间的 ...
微信小程序picker组件 - 省市二级联动及其回显
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接由于项目需 ...

Vue -- 配合iView实现省市二级联动

HTML部分

JS主要部分

Vue -- 配合iView实现省市二级联动相关推荐

最新文章

热门文章