根據地址處理表單 省/市/區 數據的回顯

我要處理的問題是,從請求中獲取到的 obj.data.address 數據依次回顯到三個分別表明省、市、區 的select標籤中。可是我obj.data.address只有相似這樣的數據 ("廣東省珠海市香洲區XX街道XX號"),我要怎麼根據這個地址數據來修改這三個select的顯示的呢?node

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)

上面的方式確實是能解決問題。雖然看起來清晰,處理(省、市、區)的代碼在哪一塊很分明,但看起來代碼上是有一些囉嗦了,並且鼠標上下滾動,這手也是挺累的哈。因此用下面這個版本避免代碼重複的問題。測試以後功能沒丟,內心極舒服。
可是萬一後面出現問題,以爲要調試這段代碼也是麻煩呢..spa

// 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月份.您好!兵哥哥們辛苦了,由於大家,祖國才愈來愈強大。調試

相關文章
相關標籤/搜索