[发明专利]一种实现web页面地域跨级别多选的方法

说明书

本发明公开了一种实现web页面地域跨级别多选的方法，其特征在于，包括以下步骤：(1)预处理；1a：构造组件；1b：初始化组件；1c：选中初始；1d；绑定事件；(2)地域选择；2a：将地域进行级联；2b：地域多选；2c：地域合并。本发明步骤简单且操作方便，还能丰富地域组件的功能，灵活的实现地域级联多选、跨地域多选、初始化选中地域等目的，从而可方便用户使用，因此适合推广使用。

技术领域

本发明涉及一种地域跨级别多选的方法，尤其涉及一种实现web页面地域跨级别多选的方法。

背景技术

现有的地域组件多是实现地域级联单选操作或对单独的某一区域进行多选，其填充初始化功能不完善，无法填充多选地域；且多选地域组件功能缺失，没有地域合并功能。

发明内容

本发明的目的在于提供一种实现web页面地域跨级别多选的方法，以期能丰富地域组件的功能，灵活的实现地域级联多选、跨地域多选、初始化选中地域等目的，以方便用户使用。

本发明通过下述技术方案实现：

一种实现web页面地域跨级别多选的方法，包括以下步骤：

(1)预处理

1a：构造组件；

1b：初始化组件；

1c：选中初始值；

1d；绑定事件；

(2)地域选择

2a：将地域进行级联；

2b：地域多选；

2c：地域合并。

进一步的，所述组件包括模板，数据和函数方法；所述模板作为基础样式，设置在标签template中，该模板用于构成组件的骨架；所述数据为组件提供输入参数，该数据存放在data变量中；所述函数方法包括实现web页面地域跨级别多选功能的方法，该函数方法都存放在组件的methods变量中。

再进一步的，所述数据包括省province，市city，区area，展示地域liveArea，选中地域selectedArea，删除地域removedArea，缓存数据cache。

更进一步的，步骤2a中将地域进行级联的具体过程为：将省/市设置为父级区域，并将省级下的市或市级下的区设置为子级区域；传入父级区域码，即可获取父级区域对应的子级区域。

为了更好地实现本发明，步骤2b中进行地域多选的具体过程为：通过多选checkbox选择地域，根据选中的地域即可禁用已选中的父级区域。

步骤2c中进行地域合并的具体过程为：将选中地域队列遍历，判断是否存在大地域覆盖小地域的情况，如果是，则将小地域过滤，展示对应的大地域。

本发明与现有技术相比，具有以下优点及有益效果：

(1)本发明步骤简单且操作方便，还能丰富地域组件的功能，灵活的实现地域级联多选、跨地域多选、初始化选中地域等目的，从而可方便用户使用。

(2)本发明提供的是完整的地域跨级别多选的方法，能够在初始化选中地域，并能解除选中地域，还能实现不同范围的省、市、区同时选中，在选中大地域时自动覆盖小地域，能自动过滤已选中地域，可方便用户快速灵活的选择地域。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例