根据地址处理表单 省/市/区 数据的回显

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

根据地址处理表单 省/市/区 数据的回显_第1张图片

思路:使用用字符串的 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月份.您好!兵哥哥们辛苦了,因为你们,祖国才越来越强大。

你可能感兴趣的:(根据地址处理表单 省/市/区 数据的回显)