最近写的关于城市联动代码,测试了好多,总是出问题,希望后面的兄弟注意
前端XML文件
<view class="section">
<picker bindchange="bindPickerChangeshengArr" value="{{shengIndex}}" range="{{shengArr}}" data-id="{{shengId[shengIndex]}}">
<view class="picker">
选择省份:{{shengArr[shengIndex]}}
<input hidden="true" name="province" value="{{shengArr[shengIndex]}}"/>
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChangeshiArr" value="{{shiIndex}}" range="{{shiArr}}">
<view class="picker">
选择城市:{{shiArr[shiIndex]}}
<input hidden="true" name="city" value="{{shiArr[shiIndex]}}"/>
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChangequArr" value="{{quIndex}}" range="{{quArr}}">
<view class="picker">
选择地区:{{quArr[quIndex]}}
<input hidden="true" name="town" value="{{quArr[quIndex]}}"/>
</view>
</picker>
</view>
后端调用数据省的触发数据
bindPickerChangeshiArr: function (e) {
this.setData({
shiIndex: '11',
quArr:[],
quiId: []
})
let getcitid = e.detail.value;
console.log("chengshiss", getcitid);
var that = this;
wx.request({
url: app.d.hostUrl + '/ajax/xcxAjax.ashx?MID=5&cityname=' + getcitid + '&classid=3',
method: 'get', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {// 设置请求的 header
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
var status = res.data.total;
var area = res.data.rows;
var qArr = [];
var qId = [];
qArr.push('请选择');
qId.push('0');
for (var i = 0; i < area.length; i++) {
qArr.push(area[i].area)
qId.push(area[i].area)
}
that.setData({
city:0,
quArr: qArr,
quiId: qId
})
},
fail: function () {
// fail
wx.showToast({
title: '网络异常!',
duration: 2000
});
}
})
},
后台获取数据是 let getcitid = e.detail.value;
这时候就会发现获取的值始终是数字,前端就会看到value的变化
获取的value 是以下标的形式出现,因此后台调取的时候以下标重新获取数据才可以
picker-view 中设置value,展示我想要的下标值,就必须在data里设置你的数组,不能再次赋值
想获取真实值,要根据this.data 查看值的方式,用下标的形式获得
如果有什么疑问多测试几次就可以了