我要处理的问题是,从请求中获取到的 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月份.您好!兵哥哥们辛苦了,由于大家,祖国才愈来愈强大。调试