[发明专利]一种基于TypeScript和HTML的二级下拉设置方法

说明书

本发明提供一种基于TypeScript和HTML的二级下拉设置方法，属于数据展示与选择领域，本发明包含：点击下拉框，展示待选择的一级数据列表；点击某个一级数据前的箭头图标，展示二级数据列表，或直接点击一级数据前的选择框，选择当前一级数据下的所有二级数据；展示二级数据后，点击二级数据前的选择框选择数据；此外还可进行模糊搜索，搜索对象为所有二级数据，所有符合条件的二级数据与一级数据一同展示，用户根据需要来选择。可以刷新数据列表并精确的进行搜索选择。

技术领域

本发明涉及数据展示与选择领域，尤其涉及一种基于TypeScript和HTML的二级下拉设置方法。

背景技术

在实际应用中，当需要对多个数据进行选择时，很多时候会用到下拉框和多选框，如果数据中有分类，就需要展示为二级选择甚至更多级选择。

用户点击数据前的选择框来进行数据选择，选定数据后下拉框内直接展示数据，数据列表都是固定的，无法再进行精确选择。

发明内容

为了解决以上技术问题，本发明提供了一种基于TypeScript和HTML的二级下拉设置方法，可以展示所有待选择的二级数据，根据模糊搜索在大量的二级数据中定位到需要选择的数据进行选择。

本发明的技术方案是：

一种基于TypeScript和HTML的二级下拉设置方法，包括：

1)设计二级下拉框的前端交互即页面交互设计；

2)从接口中获取数据，处理后在页面上展示；

3)勾选选择框来选择数据，或通过模糊搜索进一步缩小选择范围；

4)收回下拉框完成数据选择，得到所有选择的二级数据及个数。

进一步的，

所述页面交互设计；下拉框使用dropdown下拉菜单组件，下拉框内第一行展示全部数据的选择框和模糊搜索的输入框，下面展示一级目录及其对应的箭头图标和多选框，点击箭头显示一级目录下的所有二级域名，点击二级域名的选择框或一级目录的选择框或全部数据的选择框来选择数据，在下拉框内展示已经勾选的二级域名个数。

获取从后端接口获取到的数据，过滤掉没有二级域名的一级目录；为每个一级目录的选中、半选中状态设定初始值，为每个二级域名加上是否选中的字段并设置初始值。

点击一级目录前的箭头，展示出一级目录所对应的所有二级域名，每次选择一个域名，即勾选上域名前的选择框，根据二级域名的选中情况相对应地改变一级目录选择框和全部数据选择框的状态。

将选中的域名放在一个数组中作为向后端传递的参数，同时将选中的域名个数展示在下拉框内；当勾选一级目录时，该一级目录对应的所有二级域名均被选中；当勾选全部数据时，所有二级域名及一级目录都被选中，但数组中只存放所有二级域名；取消勾选时，对应改变各个选择框的状态并从存放域名的数组中删除该域名，改变显示个数。

在模糊搜索输入框内输入想查询的字段进行模糊搜索；匹配到的二级域名在其原来对应一级目录下展示，勾选二级域名时，根据现有的数据构成来决定一级目录和全部域名的选择框状态。

若在勾选结束后再次增加模糊搜索的内容，之前选择的域名依然保留在数组中，但不会展示出来，展示的域名仅为搜索内容匹配的域名，根据最新的数据构成决定一级目录和全部域名的选择框状态；若在勾选结束后减少模糊搜索的内容，则将选中的域名继续保持选中状态，其余二级域名根据搜索内容来展示。

整个模糊搜索过程中，一级目录下没有符合条件的二级域名时，一级目录不展示。

本发明的有益效果是