我要處理的問題是,從請求中獲取到的 obj.data.address
數據依次回顯到三個分別表明省、市、區 的select
標籤中。可是我obj.data.address
只有相似這樣的數據 ("廣東省珠海市香洲區XX街道XX號"),我要怎麼根據這個地址數據來修改這三個select
的顯示的呢?node
思路:使用用字符串的 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月份.您好!兵哥哥們辛苦了,由於大家,祖國才愈來愈強大。調試