The initial UI interface is a table for a distribution area.

area:[
    {
        "areaIds": "                    ["110000","120000","130000","140000","150000","210000","220000","230000","310000","320000","330000","340000","350000","360000","370000","410000","420000","430000","440000","450000","460000","500000","510000","520000","530000","540000","610000","620000","630000","640000","650000","710000","810000","820000"]",
        
        "areaNames": "Beijing, Tianjin, Hebei, Shanxi, Inner Mongolia, Liaoning, Jilin, Heilongjiang, Shanghai,                        Jiangsu Province, Zhejiang Province, Anhui Province, Fujian Province, Jiangxi Province, Shandong Province, Henan Province, Hubei Province, Hunan Province, Guangdong Province,                    Guangxi Zhuang Autonomous Region, Hainan Province, Chongqing City, Sichuan Province, Guizhou Province, Yunnan Province, Tibet Autonomous Region, Shaanxi Province and Gansu Province                    Su, Qinghai, Ningxia Hui Autonomous Region, Xinjiang Uygur Autonomous Region, Taiwan Province, Hong Kong Special Administrative Region and Macao Special Administrative Region"
        "shoujian": "1",
        "yunfei": "1",
        "xujian": "1",
        "xufei": "1"
    }
]

The json data above is the field where we need to send requests in the background.

Among them: Area represents the data of the whole distribution area table, that is, the data of our module.

     The area Ids field is the id value selected by the user, including the provincial id or the provincial id and the city id or the provincial, municipal and county id.

What's worth noting here is that

When the user clicks on the full selection, the value of areaIds is

["110000","120000","130000","140000","150000","210000","220000","230000","310000","320000","330000","340000","350000","360000","370000","410000","420000","430000","440000","450000","460000","500000","510000","520000","530000","540000","610000","620000","630000","640000","650000","710000","810000","820000"]"

That is, the value of all provinces.

However, if one district or county is missing, it will not be possible to return to all the provinces, but to the other selected provinces plus the id of the fully selected city plus the id of the selected district or county.

In other words, all of the same level is selected and returned directly to the id of the previous level.

If not all of them are selected, return the selected value at this level

The area Ids field ends with the set of the fullest level selected plus the id that is not filled.

The field areaNames corresponds to the value of id, which is a collection of strings.

Among them, [specify distributable area and freight] is a button, click the pop-up window.

Click on [All Choices]

Click on the full selection again and all selected cities will be cancelled.

Click on the OK button after the full selection

When the user clicks on the full selection, only the data in this line can be added.

[Specify Distributable Areas and Freight] This cannot be clicked to select

At this point, sending background data is what I said at the beginning.

area:[
    {
        "areaIds": "                    ["110000","120000","130000","140000","150000","210000","220000","230000","310000","320000","330000","340000","350000","360000","370000","410000","420000","430000","440000","450000","460000","500000","510000","520000","530000","540000","610000","620000","630000","640000","650000","710000","810000","820000"]",
        
        "areaNames": "Beijing, Tianjin, Hebei, Shanxi, Inner Mongolia, Liaoning, Jilin, Heilongjiang, Shanghai,                        Jiangsu Province, Zhejiang Province, Anhui Province, Fujian Province, Jiangxi Province, Shandong Province, Henan Province, Hubei Province, Hunan Province, Guangdong Province,                    Guangxi Zhuang Autonomous Region, Hainan Province, Chongqing City, Sichuan Province, Guizhou Province, Yunnan Province, Tibet Autonomous Region, Shaanxi Province and Gansu Province                    Su, Qinghai, Ningxia Hui Autonomous Region, Xinjiang Uygur Autonomous Region, Taiwan Province, Hong Kong Special Administrative Region and Macao Special Administrative Region"
        "shoujian": "1",
        "yunfei": "0",
        "xujian": "1",
        "xufei": "0"
    }
]

- Array has only one object data
- areaIds All provinces id Composed array
- areaNames All provinces name Composed string
- shoujian First piece 1 piece
- yunfei Freight 0 yuan
- xujian Sequel 1
- xufei Renewal fee 0 yuan

Point editing also opens the pop-up window.

Point Hebei Province

Select Shijiazhuang

Click on the drop-down arrow of Shijiazhuang to show the bullet window of the selected districts and counties

After confirming the cancellation of clicks in Xinle City

The number of districts and counties without red in Shijiazhuang City is reduced by 1

Then select Baoding City and click OK to have a look.

The current data that needs to be sent to the background is

Provinces in Beijing + Provinces in Tianjin +.... All other selected

The point is that the province id and name in Hebei Province are not needed because they are not all selected.
Instead, it was the ID of Baoding (because it was all selected).

+ id value of 21 districts and counties in Shijiazhuang City

Click on the button again. The selected state of the previous line is reserved.

However, the selected value can not be selected to prohibit selection, but can only be added on this basis, not as good as the full selection of Tangshan City.