vue地址国省市三级联动显示/传值

HTML

<li><span >地址</span>
<div>
<select name="sel" id="sel" v-model="address" @change="change">

//value
<option disabled value="">选择国家</option>
<option v-for="con in country" :value="con.name" ref="newText">{{ con.name }}</option>
</select>
<select v-model="address1" @change="change1" id="ssss" v-show="city">
<option disabled value="">选择省</option>
<option v-for="con1 in country1" :value="con1.name">{{ con1.name }}</option>
</select>
<select v-model="address2" @change="change2" v-show="county">
<option disabled value="">选择市</option>
<option v-for="con2 in country2" :value="con2.name">{{ con2.name }}</option>
</select>
</div>
</li>

DATA

address: '',
address1: '',
address2: '',

country: {},
country1: {},
country2: {},

city: false,
county: false,

iddd:0;

idddd:0;

mounted里

// 地址接口,已经选择好的数据接口，比如中国，北京，xx
this.$http.get(接口url, {
params: {
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
sign: sign
}
}).then(response => {

let address = response.data.data.country;
let address1 = response.data.data.province;
let address2 = response.data.data.city;
that.address = address
// console.log(that.address)

//如果没有选择默认显示国家select
if (address == "") {
that.address = ''
that.city = false
that.county = false
}

//判断省
if (address1 == "") {
that.address1 = ''
that.city = false
} else {
that.city = true
that.address1 = address1
}

//判断市
if (address2 == "") {
that.address2 = ''
that.county = false
}else {
that.county = true
that.address2 = address2
}

}),

//已经选择好的数据接口，比如中国，北京，xx，判断的接口都在这里面
this.$http.get(已经选择好的数据接口，比如中国，北京，xx, {
params: {
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
sign: sign
}
}).then(response => {
let country1 = response.data.data.country
that.address = country1;
that.address1 = response.data.data.province
if (response.data.data.city){
that.address2 = response.data.data.city
}
// 地址国省市option接口
this.$http.get(国家接口country', {
params: {
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
sign: sign
}
}).then(response => {
let country = response.data.data
that.country = country;
if (that.address){
that.address=that.address
}
var id = 0;
for (var i in that.country) {
if (that.address == that.country[i].name) {
id = that.country[i].id
// console.log(id)
that.iddd=id
}
}
if (that.iddd!=0){
tha.get(省接口/' + that.iddd, {
params: {
X_Lang: lang,
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
sign: sign
}
}).then(response => {
that.country1=response.data.data
that.address1= that.address1
// console.log(that.country1)
var id1=0
for (var i in that.country1) {

if (that.address1 == that.country1[i].name) {
id1 = that.country1[i].id
}
}
// console.log(id1)
if ( that.address2) {
tha.get(市接口/' + id1, {
params: {
X_Lang: lang,
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
sign: sign
}
}).then(response => {
that.country2=response.data.data
// console.log(that.country2)
that.address2= that.address2

})

}

})
}

})
})

methods里

change() {
var that = this;
for (var i in that.country) {

//如果第一个select框选择了国家
if (that.address == that.country[i].name) {
let idd = that.country[i].id

//用这个ID请求下一个省的接口
that.iddd=idd
}
}

//第二个select框省出现
that.city = true

//第三个select框市隐藏，因为多次点击每次都要清空值隐藏
that.county = false
that.address1 = ""

//这些事根据自己需要的时间戳，tooken，保密码
var timestamp = new Date().getTime()
var arr = {
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
}
var a = "";
for (let i in arr) {
a += i + "=" + arr[i] + "&";
}
var md = that.Md5.md5(a + "key=air_snow").toUpperCase()
// 地址省option接口
that.$http.get(自己的url地址 + that.iddd, {
params: {
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
sign: md
}
}).then(response => {
let country1 = response.data.data
that.country1 = country1;
})
},

//选择省
change1() {
var that = this;
//跟上面一步一样
for (var i in that.country1) {

if (that.address1 == that.country1[i].name) {
let id1 = that.country1[i].id
that.idddd=id1
}
}
// console.log(this.idddd)
var timestamp = new Date().getTime()
var arr = {
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
}
var a = "";
for (let i in arr) {
a += i + "=" + arr[i] + "&";
}
var md = that.Md5.md5(a + "key=air_snow").toUpperCase()
// 地址市option接口
that.$http.get(自己的url地址 + that.idddd, {
params: {
access_token: that.$cookieStore.getCookie('token'),
timestamp: timestamp,
sign: md
}
}).then(response => {
let country2 = response.data.data
that.country2 = country2;
that.county = true
that.address2 = ""

//有的两级联动，有的三级联动，判断有无第三级
if (that.country2 == undefined) {
// console.log(222)
that.county = false

//box是我自己需要一个值判断后面是否选择，不用的可以不写
that.box = 2;
// console.log(that.box)

} else {
that.box = 3;
// console.log(that.box)
}
})
},
change2() {

vue地址国省市三级联动显示/传值

猜你喜欢