依据地点处置惩罚表单 省/市/区 数据的回显

我要处置惩罚的题目是,从要求中获取到的 obj.data.address 数据依次回显到三个离别代表省、市、区 的select标签中。然则我obj.data.address只要相似如许的数据 (“广东省珠海市香洲区XX街道XX号”),我要怎样依据这个地点数据来修正这三个select的显现的呢?

《依据地点处置惩罚表单 省/市/区 数据的回显》

思绪:运用用字符串的 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月份.您好!兵哥哥们辛苦了,由于你们,故国才愈来愈壮大。

    原文作者:qworld
    原文地址: https://segmentfault.com/a/1190000015853388
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞