2018-08-01

我要处理的问题是，从请求中获取到的 obj.data.address 数据依次回显到三个分别代表省、市、区 的select标签中。但是我obj.data.address只有类似这样的数据 ("广东省珠海市香洲区XX街道XX号")，我要怎么根据这个地址数据来修改这三个select的显示的呢？

image.png

思路：使用用字符串的 startsWith方法
eg:
'广东省珠海市香洲区XX街道XX号'.startsWith('广东省')返回true,省份select的值被确定,然后将 “广东省” 从地址中删除掉address.replace('广东省', '').
'珠海市香洲区XX街道XX号'.startsWith('珠海市')返回true,市区select的值被确定，同样在address中删掉已匹配到的结果.
'香洲区XX街道XX号'.startsWith('香洲区')返回true,市区select的值被确定，同样在address中删掉已匹配到的结果.
现在 address中只剩下xxx街道xxx号，自然就是街道信息了，将它放在表示街道的表单域中.

// address
let address = obj.data.address;
/* -- 省份 -- */
var proviceNodeList = document.querySelectorAll('#province option')
let province = Array.from(proviceNodeList).filter(ele => {
    return address.startsWith( ele.value ) && ele.value != ''
})[0];
$('#province').val(province = (province==undefined ? '' : province.value)).change();

address = address.replace(province, '');
//console.log(province + '替换后', address)
/* -- 市区 -- */
var cityNodeList = document.querySelectorAll('#city option')
let city = Array.from(cityNodeList).filter(ele => {
    return address.startsWith( ele.value ) && ele.value != ''
})[0];
$('#city').val(city = (city==undefined ? '' : city.value)).change();
address = address.replace(city, '');
//console.log(city + '替换后', address)

/* -- 县区 -- */
var countyNodeList = document.querySelectorAll('#county option')
let county = Array.from(countyNodeList).filter(ele => {
    return address.startsWith( ele.value ) && ele.value != ''
})[0];
$('#county').val(county = (county==undefined ? '' : county.value)).change();
address = address.replace(county, '');
//console.log(county + '替换后', address)
/* 街道 */
$('#street').val(address)

上面的方式确实是能解决问题。虽然看起来清晰，处理（省、市、区）的代码在哪一块很分明，但看起来代码上是有一些啰嗦了，而且鼠标上下滚动，这手也是挺累的哈。所以用下面这个版本避免代码重复的问题。测试之后功能没丢，心里极舒服。
但是万一后面出现问题，觉得要调试这段代码也是麻烦呢..

// address
let address = obj.data.address;
['province', 'city', 'county'].map(el => {
    var nodeList = document.querySelectorAll('#'+ el +' option')
    let option = Array.from(nodeList).filter(ele => {
        return address.startsWith( ele.value ) && ele.value != ''
    })[0];
    $('#' + el).val(option = (option==undefined ? '' : option.value)).change();
    address = address.replace(option, '');
})
// 街道
$('#street').val(address)

最后，8月份.您好！兵哥哥们辛苦了，因为你们，祖国才越来越强大。