下拉框交互方法、装置、设备及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种下拉框交互方法、装置、设备及存储介质。

背景技术

下拉框是目前常用的一种选项查看和选择工具，通过点击下拉框，可以打开并展示多个选项，用户根据自身的需求选中选项，实现选项的选择。

相关技术中，用户点击选项前的选择框来进行选项选择。然而，相关技术中的下拉框具有的交互功能较为单一，难以满足用户多样化的需求。

发明内容

本申请提供一种下拉框交互方法、装置、设备及存储介质，操作便捷，实现了选项的即时添加，实用性较高。

第一方面，本申请提供一种下拉框交互方法，包括：

在构建目标下拉框的过程中，获取所述目标下拉框对应的下拉框配置参数，并对所述下拉框配置参数进行解析以获得所述目标下拉框对应的数据源接口和添加组件；所述数据源接口用于获取在所述目标下拉框的展开区中展示的选项，所述添加组件用于添加新的选项；

调用所述数据源接口以获得多个选项，并将所述多个选项映射至所述展开区；

将所述添加组件在所述展开区中进行配置，以在所述展开区中展示添加控件，所述添加控件用于在被触发时添加新的选项；

响应于所述添加控件被触发，获取所输入的选项信息，并向服务器发送所述选项信息，以使所述服务器存储所述选项信息，所述选项信息用于描述待添加的选项；

在接收到所述服务器发送的存储成功信息的情况下，对所述展开区进行刷新展示，所述存储成功信息用于表示存储所述选项信息成功。

可选地，所述下拉框配置参数还包括展示方式，所述展示方式为树结构方式或非树结构方式，在所述展示方式为所述非树结构方式的情况下，所述添加控件包括选项名称输入框、选项值输入框和添加按钮；

所述响应于所述添加控件被触发，获取所输入的选项信息，包括：

响应于所述添加按钮被触发，获取在所述选项名称输入框中输入的选项名称和在所述选项值输入框中输入的选项值。

可选地，在所述展示方式为所述树结构方式的情况下，所述添加控件包括父级选项选择按钮、所述选项名称输入框、所述选项值输入框和所述添加按钮；

所述响应于所述添加控件被触发，获取所输入的选项信息，包括：

响应于所述添加按钮被触发，获取基于所述父级选项选择按钮选择的父级选项、在所述选项名称输入框中输入的选项名称和在所述选项值输入框中输入的选项值。

可选地，获取基于所述父级选项选择按钮选择的父级选项，包括：

响应于所述父级选项选择按钮被触发，在所述父级选项选择按钮周围的预设区域，展示所述展开区中展示的多个上级选项；

响应于任一所述上级选项被选中，将被选中的上级选项确定为所述父级选项。

可选地，所述对所述展开区进行刷新展示，包括：

调用所述数据源接口以获得最新的多个选项，并将所述最新的多个选项映射至所述展开区。

可选地，所述下拉框配置参数还包括预设数量，所述预设数量用于在所述目标下拉框的收起区中展示选项，所述收起区用于对被选中的选项进行展示；所述方法还包括：

响应于所述展开区中的任一所述选项被选中，在所述收起区中展示被选中的选项对应的选项名称；

在被选中的选项的总数量超过所述预设数量的情况下，在所述收起区中展示目标数量以及所述预设数量个被选中的选项分别对应的选项名称；所述目标数量为所述总数量与所述预设数量之差；

响应于鼠标悬停在所述目标数量上，在所述收起区中，以气泡的样式展示除所述预设数量个被选中的选项以外的其他被选中的选项分别对应的选项名称。

可选地，所述方法还包括：

在所述收起区中展示被选中的选项对应的选项名称时，还展示所述选项名称对应的取消选择按钮；

响应于所述选项名称对应的取消选择按钮被触发，在所述收起区中，取消展示所述选项名称和所述取消选择按钮，并在所述展开区中，取消选择所述选项名称对应的选项。

可选地，所述下拉框配置参数还包括刷新组件，所述刷新组件用于刷新在所述目标下拉框中展示的选项；所述方法还包括：

将所述刷新组件在所述展开区中进行配置，以在所述展开区中展示刷新按钮；

响应于所述刷新按钮被触发，调用所述数据源接口以获得最新的多个选项；

将所述最新的多个选项映射至所述展开区。

第二方面，本申请提供一种下拉框交互装置，包括：

第一获取模块，用于在构建目标下拉框的过程中，获取所述目标下拉框对应的下拉框配置参数，并对所述下拉框配置参数进行解析以获得所述目标下拉框对应的数据源接口和添加组件；所述数据源接口用于获取在所述目标下拉框的展开区中展示的选项，所述添加组件用于添加新的选项；

映射模块，用于调用所述数据源接口以获得多个选项，并将所述多个选项映射至所述展开区；

配置模块，用于将所述添加组件在所述展开区中进行配置，以在所述展开区中展示添加控件，所述添加控件用于在被触发时添加新的选项；

第二获取模块，用于响应于所述添加控件被触发，获取所输入的选项信息，并向服务器发送所述选项信息，以使所述服务器存储所述选项信息，所述选项信息用于描述待添加的选项；

展示模块，用于在接收到所述服务器发送的存储成功信息的情况下，对所述展开区进行刷新展示，所述存储成功信息用于表示存储所述选项信息成功。

第三方面，本申请提供一种电子设备，包括：处理器以及分别与所述处理器通信连接的存储器和收发器；

所述存储器存储计算机执行指令；所述收发器用于与服务器之间收发数据；

所述处理器执行所述存储器存储的计算机执行指令，以实现如第一方面任一项所述的下拉框交互方法。

第四方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现第一方面任一项所述的下拉框交互方法。

第五方面，本申请提供一种计算机程序产品，包括计算机执行指令，所述计算机执行指令被处理器执行时实现第一方面任一项所述的下拉框交互方法。

本申请提供的下拉框交互方法、装置、设备及存储介质，在构建目标下拉框的过程中，用户先设置好下拉框配置参数，从而触发设备获取目标下拉框对应的下拉框配置参数，并解析得到数据源接口和添加组件，从而通过调用数据源接口获得多个选项，以映射至展开区，并在展开区中展示添加控件，用户想要添加新的选项时，能够输入选项信息并触发该添加控件，从而设备获取用户所输入的选项信息，借助于服务器存储该选项信息，并对展开区进行刷新展示，以实现在展开区中添加新的选项的目的，操作便捷，实现了选项的即时添加，实用性较高。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1是根据一示例性实施例示出的一种应用场景的示意图；

图2是根据一示例性实施例示出的一种下拉框交互方法的流程示意图；

图3是根据一示例性实施例示出的一种下拉框的示意图；

图4是根据另一示例性实施例示出的一种下拉框的示意图；

图5是根据再一示例性实施例示出的一种收起区的示意图；

图6是根据另一示例性实施例示出的一种下拉框交互方法的流程示意图；

图7是根据一示例性实施例示出的一种下拉框交互装置的结构示意图；

图8是根据一示例性实施例示出的一种电子设备的结构示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

下拉框是目前常用的一种选项查看和选择工具，通过点击下拉框，可以打开并展示多个选项，用户根据自身的需求选中选项，实现选项的选择。

相关技术中，用户点击选项前的选择框来进行选项选择。然而，相关技术中的下拉框具有的交互功能较为单一，难以满足用户多样化的需求。

针对现有技术中的下拉框具有的交互功能较为单一，难以满足用户多样化的需求的问题，发明人在研究中发现，为了解决该问题，可以为下拉框设置更多的功能。在构建下拉框的过程中，用户可能存在添加选项的需求，可以在下拉框中设置添加控件，这样用户可以即时添加新的选项。具体地，在构建目标下拉框的过程中，用户先设置好下拉框配置参数，从而触发设备获取目标下拉框对应的下拉框配置参数，并解析得到数据源接口和添加组件，从而通过调用数据源接口获得多个选项，以映射至展开区，并在展开区中展示添加控件，用户想要添加新的选项时，能够输入选项信息并触发该添加控件，从而设备获取用户所输入的选项信息，借助于服务器存储该选项信息，并对展开区进行刷新展示，以实现在展开区中添加新的选项的目的，操作便捷，实现了选项的即时添加，实用性较高。

下面对本申请实施例提供的下拉框交互方法的应用场景进行介绍。

图1是根据一示例性实施例示出的一种应用场景的示意图。如图1所示，该应用场景中包括：电子设备1。其中，电子设备1为用户使用的设备，且电子设备1用于进行下拉框交互，用户为页面开发人员，可以通过电子设备1构建新的下拉框。在本实施例中，电子设备1获取目标下拉框对应的下拉框配置参数，并对下拉框配置参数进行解析以获得目标下拉框对应的数据源接口和添加组件，然后调用数据源接口以获得多个选项，并将多个选项映射至展开区，将添加组件在展开区中进行配置，以在展开区中展示添加控件，响应于添加控件被触发，获取所输入的选项信息，并向服务器发送选项信息，以使服务器存储选项信息，在接收到服务器发送的存储成功信息的情况下，对展开区进行刷新展示。

本申请提供的下拉框交互方案可以应用于下拉框构建场景中，例如页面开发人员想要构建一个下拉框，则可以触发电子设备执行本申请提供的下拉框交互方法来构建新的下拉框。构建得到的下拉框可以应用于多种场景，例如线上问卷调查、网页的导航菜单、电商网站的商品分类选择、选课网站的课程分类选择、电子菜单中的餐品分类选择或其他适用于下拉框的场景。

下面以具体的实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

图2是根据一示例性实施例示出的一种下拉框交互方法的流程示意图。本申请提供的下拉框交互方法的执行主体为下拉框交互装置，该下拉框交互装置集成在电子设备中。如图2所示，本实施例提供的下拉框交互方法包括以下步骤：

步骤S101，在构建目标下拉框的过程中，获取目标下拉框对应的下拉框配置参数，并对下拉框配置参数进行解析以获得目标下拉框对应的数据源接口和添加组件；数据源接口用于获取在目标下拉框的展开区中展示的选项，添加组件用于添加新的选项。

其中，下拉框配置参数是事先设置好的，在页面开发过程中，若用户想要构建下拉框，则先设置好下拉框对应的下拉框配置参数，然后触发电子设备构建下拉框，从而电子设备获取下拉框对应的下拉框配置参数，并对下拉框配置参数进行解析，得到数据源接口和添加组件。其中，数据源接口为服务器提供的接口，服务器中存储有多个选项。本申请以所构建的下拉框为目标下拉框为例进行说明。

其中，本实施例中的目标下拉框可以通过antd组件库中的select组件实现，其中，antd是基于Ant Design设计体系的用户界面(User Interface，UI)组件库。或者本实施例中的目标下拉框还可以通过Element组件库、EasyUI(一种基于jQuery的用户界面插件集合)等实现。

步骤S102，调用数据源接口以获得多个选项，并将多个选项映射至展开区。

在解析得到数据源接口之后，调用该数据源接口以获得多个选项。具体地，电子设备通过数据源接口向服务器发送数据获取请求，服务器响应于该数据获取请求，获取已存储的多个选项，向电子设备发送这多个选项，从而电子设备接收者多个选项，然后将多个选项映射至展开区，这样操作电子设备的用户能够从展开区中查看这多个选项。

步骤S103，将添加组件在展开区中进行配置，以在展开区中展示添加控件，添加控件用于在被触发时添加新的选项。

其中，在解析得到添加组件之后，电子设备将添加组件在展开区中进行配置，以在展开区中展示添加控件。添加控件和多个选项在展开区中的展示位置和展示样式可以根据需要设置，本实施例对此不加以限定。例如，多个选项以列表的样式展示，而添加控件展示在多个选项的下方区域。

步骤S104，响应于添加控件被触发，获取所输入的选项信息，并向服务器发送选项信息，以使服务器存储选项信息，选项信息用于描述待添加的选项。

其中，添加控件的触发方式可以根据需要设置，本实施例对此不加以限定，例如，触发方式为单击、双击或长按等。用户通过添加控件输入选项信息，然后触发添加控件，从而电子设备获取所输入的选项信息，向服务器发送存储请求，存储请求携带该选项信息，服务器响应于该存储请求，存储该选项信息，并向电子设备发送存储成功信息，存储成功信息用于表示存储选项信息成功。其中，电子设备通过调用数据源接口向服务器发送存储请求。

需要说明的是，服务器在未成功存储该选项信息的情况下，向电子设备发送存储失败信息，存储失败信息用于表示存储选项信息失败，相应地，电子设备在接收到服务器发送的存储失败信息的情况下，展示提示信息，该提示信息用于提示选项信息存储失败，用户能够通过电子设备查看该提示信息，从而了解选项信息存储失败，以便后续操作。例如，用户可以查看所输入的选项信息是否错误，还可以重新输入选项信息并触发添加控件。

步骤S105，在接收到服务器发送的存储成功信息的情况下，对展开区进行刷新展示，存储成功信息用于表示存储选项信息成功。

其中，通过对展开区进行刷新展示，使得用户能够查看刷新后的选项，该刷新后的选项包括选项信息所描述的选项，从而实现了选项的添加。

在本实施例中，在构建目标下拉框的过程中，用户先设置好下拉框配置参数，从而触发设备获取目标下拉框对应的下拉框配置参数，并解析得到数据源接口和添加组件，从而通过调用数据源接口获得多个选项，以映射至展开区，并在展开区中展示添加控件，用户想要添加新的选项时，能够输入选项信息并触发该添加控件，从而设备获取用户所输入的选项信息，借助于服务器存储该选项信息，并对展开区进行刷新展示，以实现在展开区中添加新的选项的目的，操作便捷，实现了选项的即时添加，实用性较高。

在图2所示实施例的基础上，在一种可选实施例中，下拉框配置参数还包括展示方式，展示方式为树结构方式或非树结构方式。其中，电子设备对下拉框配置参数进行解析，解析得到的参数还包括展示方式。其中，非树结构方式可以为除了树结构方式以外的任一展示方式，例如列表方式或其他展示方式。

第一种情况，在展示方式为非树结构方式的情况下，添加控件包括选项名称输入框、选项值输入框和添加按钮。相应地，步骤S103具体为：将添加组件在展开区中进行配置，以在展开区中展示选项名称输入框、选项值输入框和添加按钮。步骤S104中的响应于添加控件被触发，获取所输入的选项信息的实现方式包括：响应于添加按钮被触发，获取在选项名称输入框中输入的选项名称和在选项值输入框中输入的选项值。

例如，图3是根据一示例性实施例示出的一种下拉框的示意图，如图3所示，下拉框包括展开区，展开区的上部以列表方式展示有多个选项：选项1、选项2、选项3、选项4和选项5，并且展开区的下部展示有选项名称输入框“选项名称”、选项值输入框“选项值”和添加按钮“添加”。

在本实施例中，通过展开区中展示选项名称输入框、选项值输入框和添加按钮，使得用户能够分别在选项名称输入框中输入选项名称，在选项值输入框中输入选项值，并触发添加按钮，通过人机交互的方式实现选项信息的输入，便于用户灵活输入符合需求的选项信息，用户体验感较好。

第二种情况，在展示方式为树结构方式的情况下，添加控件包括父级选项选择按钮、选项名称输入框、选项值输入框和添加按钮。相应地，步骤S103具体为：将添加组件在展开区中进行配置，以在展开区中展示父级选项选择按钮、选项名称输入框、选项值输入框和添加按钮。步骤S104中的响应于添加控件被触发，获取所输入的选项信息的实现方式包括：响应于添加按钮被触发，获取基于父级选项选择按钮选择的父级选项、在选项名称输入框中输入的选项名称和在选项值输入框中输入的选项值。

例如，图4是根据一示例性实施例示出的一种下拉框的示意图，如图4所示，下拉框包括展开区，展开区的上部以树结构方式展示有多个选项：上级选项“分类1”和“分类2”、属于上级选项“分类1”的下级选项“选项1”、属于上级选项“分类2”的下级选项“选项2”和“选项3”，并且展开区的下部展示有选项名称输入框“选项名称”、选项值输入框“选项值”、父级选项选择按钮“选项父级”和添加按钮“添加”。

在本实施例中，通过展开区中展示父级选项选择按钮、选项名称输入框、选项值输入框和添加按钮，使得用户能够分别在选项名称输入框中输入选项名称，在选项值输入框中输入选项值，还能够基于父级选项选择按钮选择待添加选项对应的上级选项，并触发添加按钮，通过人机交互的方式实现选项信息的输入，便于用户灵活输入符合需求的选项信息，用户体验感较好。

在上述第二种情况中，在一种可选实现方式中，获取基于父级选项选择按钮选择的父级选项的实现方式包括：响应于父级选项选择按钮被触发，在父级选项选择按钮周围的预设区域，展示展开区中展示的多个上级选项；响应于任一上级选项被选中，将被选中的上级选项确定为父级选项。其中，预设区域可以根据需要设置，本实施例对此不加以限定，例如预设区域为下方区域、上方区域、左侧区域或右侧区域。

在本实施例中，由于展开区中所展示的多个选项存在层级关系，那么在添加新的选项时，需要确定该选项与其他选项之间的层级关系，用户通过触发父级选项选择按钮，来从所展示的多个上级选项中选项父级选项，从而电子设备能够确定该父级选项与待添加的选项之间的层级关系。

在图2所示实施例的基础上，在一种可选实施例中，步骤S105中的对展开区进行刷新展示的实现方式包括：调用数据源接口以获得最新的多个选项，并将最新的多个选项映射至展开区。

在本实施例中，所获得的最新的多个选项包括上述选项信息所描述的选项，通过对展开区进行刷新展示，使得用户能够查看刷新后的选项，该刷新后的选项包括选项信息所描述的选项，从而实现了选项的添加。

在图2所示实施例的基础上，在一种可选实施例中，下拉框配置参数还包括预设数量，预设数量用于在目标下拉框的收起区中展示选项，收起区用于对被选中的选项进行展示；本申请提供的下拉框交互方法还包括以下步骤：

响应于展开区中的任一选项被选中，在收起区中展示被选中的选项对应的选项名称；在被选中的选项的总数量超过预设数量的情况下，在收起区中展示目标数量以及预设数量个被选中的选项分别对应的选项名称；目标数量为总数量与预设数量之差；响应于鼠标悬停在目标数量上，在收起区中，以气泡的样式展示除预设数量个被选中的选项以外的其他被选中的选项分别对应的选项名称。

其中，预设数量可以根据需要设置，本实施例对此不加以限定，例如预设数量为1、2或3等。气泡指的是气泡框，气泡框的大小可以根据所展示的选项名称的数量设置。可选地，下拉框配置参数还包括气泡方向；相应地，以气泡的样式展示除预设数量个被选中的选项以外的其他被选中的选项分别对应的选项名称的实现方式包括：按照气泡方向，展示气泡，气泡中展示有除预设数量个被选中的选项以外的其他被选中的选项分别对应的选项名称。其中，气泡方向可以根据需要设置，本实施例不加以限定，例如上方、下方、右方或左方等方向。在本实施例中，通过按照气泡方向展示气泡，增加了展示的美观性。

例如，图5是根据一示例性实施例示出的一种收起区的示意图，如图5所示，收起区中展示有一个被选中的选项对应的选项名称“选项1”以及目标数量“3”，当鼠标悬停在目标数量上时，以气泡的样式展示其他被选中的选项分别对应的选项名称“选项2”、“选项3”和“选项4”。

在本实施例中，收起区的展示空间有限，最多展示预设数量个选项名称，那么在被选中的选项的总数量未超过预设数量的情况下，说明被选中的选项的总数量较少，直接在收起区中展示每个被选中的选项分别对应的选项名称。而在被选中的选项的总数量超过预设数量的情况下，说明被选中的选项的总数量较多，则在收起区展示预设数量个被选中的选项分别对应的选项名称，而其他被选中的选项只展示数量，也即目标数量。当检测到鼠标悬停在目标数量上时，表示用户存在查看选项的需求，则以气泡的样式展示其他被选中的选项分别对应的选项名称，这样在目标下拉框的展开区处于收起状态时，用户无需触发展开目标下拉框的展开区，就能够在收起区中查看，操作简便高效，更能够满足用户的需求。

在上述可选实施例的基础上，本申请提供的下拉框交互方法还包括：在收起区中展示被选中的选项对应的选项名称时，还展示选项名称对应的取消选择按钮；响应于选项名称对应的取消选择按钮被触发，在收起区中，取消展示选项名称和取消选择按钮，并在展开区中，取消选择选项名称对应的选项。

其中，收起区中展示的被选中的选项既包括在收起区中直接展示的被选中的选项，还包括以气泡的样式展示的被选中的选项。相应地，响应于选项名称对应的取消选择按钮被触发，若选项名称对应的选项是以气泡的样式展示的，则对目标数量进行更新展示。

例如，如图5所示，若触发“选项1”对应的取消选择按钮“×”，则取消展示“选项1”以及对应的取消选择按钮，并更新展示为“选项2”以及对应的取消选择按钮，则气泡框内更新展示为“选项3”、“选项4”以及分别对应的取消选择按钮；若触发“选项2”对应的取消选择按钮，则在气泡框中取消展示“选项2”以及对应的取消选择按钮，并将目标数量“3”更新展示为“2”。

在本实施例中，收起区还提供有选项的取消选择功能，用户可以触发选项名称对应的取消选择按钮，以取消选择对应的选项，实现了选项的快捷取消选择，操作简便。

在图2所示实施例的基础上，在一种可选实施例中，下拉框配置参数还包括刷新组件，刷新组件用于刷新在目标下拉框中展示的选项；本申请提供的下拉框交互方法还包括以下步骤：将刷新组件在展开区中进行配置，以在展开区中展示刷新按钮；响应于刷新按钮被触发，调用数据源接口以获得最新的多个选项；将最新的多个选项映射至展开区。

其中，刷新按钮在展开区中的展示位置和展示样式可以根据需要设置，本实施例对此不加以限定。例如，刷新按钮展示在展开区中的左上角、右上角等位置。触发刷新按钮的方式可以根据需要设置，本实施例对此不加以限定，例如触发方式可以为单击、双击或者长按等方式。例如，如图3或图4所示，展开区中展示有刷新按钮“刷新”。

在本实施例中，下拉框具有数据刷新功能，在检测到刷新按钮被触发之后，将展开区中所展示的选项清空，并再次调用数据源接口以获取最新的多个选项，然后将最新的多个选项映射至展开区，从而实现了选项的刷新，提高了选项的实时性。

在图2所示实施例的基础上，在一种可选实施例中，下拉框配置参数还包括搜索组件，搜索组件用于搜索与关键字匹配的选项；本申请提供的下拉框交互方法还包括以下步骤：将搜索组件在展开区中进行配置，以在展开区中展示搜索框；获取在搜索框中输入的关键字，并向服务器发送关键字，以使服务器获取与关键字匹配的选项；接收服务器发送的与关键字匹配的选项；在展开区中对选项进行高亮展示。其中，搜索框在展开区中的展示位置和展示样式可以根据需要设置，本实施例对此不加以限定。例如，如图3或图4所示，展开区中展示有搜索框“搜索”。在本实施例中，下拉框提供有搜索功能，通过检索关键字，筛选出符合要求的选项，从而显示符合要求的选项，便于用户观察快速定位所需要的选项，实现了选项的快速定位。

在图2所示实施例的基础上，在一种可选实施例中，下拉框配置参数还包括全选组件，全选组件用于全选展开区中的选项。本申请提供的下拉框交互方法还包括以下步骤：将全选组件在展开区中进行配置，以在展开区中展示全选按钮；响应于全选按钮被触发，将展开区中的选项均设置为被选中状态。其中，全选按钮的展示位置和展示样式可以根据需要设置，本实施例对此不加以限定。例如，继续参见图3或图4，在展开区中设置有全选按钮“全部”。本实施例提供了一键全选的功能，便于用户操作，无需频繁多次选择不同的选项，从而提高了操作效率，改善了用户体验。

下面以通过antd组件库中的select组件实现下拉框为例，对所依赖的select组件的相关参数进行说明。

1、mode：用于设置select组件的模式为multiple(多选)或tag(标签)。

参数值说明：本申请中的下拉框属于多选模式，所以该参数值设置为多选。

2、maxTagCount：用于设置最多显示多少个tag，类型为number(数量)。

参数值说明：默认为1，还可以根据用户需求进行设置。本申请中的预设数量是根据该参数设置的。

3、maxTagPlaceholder：用于设置隐藏tag时所显示的内容。

参数值说明：该参数用于展示其他选项的总个数及鼠标移入时所展示的具体内容。本申请中的目标数量是根据该参数设置的，并且还支持以气泡(Popover)样式展示内容。在此基础上，根据popoverPlacement参数来配置气泡方向，支持十二个方向的配置：top(上方)、topLeft(上左方)、topRight(上右方)、left(左方)、leftTop(左上方)、leftBottom(左下方)、right(右方)、rightTop(右上方)、rightBottom(右下方)、bottom(下方)、bottomLeft(下左方)、bottomRight(下右方)。取消选择选项时传入父组件的onChange方法，改变选中值。

4、dropdownRender：用于设置自定义内容。

参数值说明：本申请利用该参数展示搜索按钮、刷新按钮、全选按钮以及下拉框中的多个选项，非树结构的内部利用Checkbox(复选框)与Checkbox.Group(复选框组)实现全选及选项的展示，树结构的利用Tree实现全选及选项的展示。

5、isTree：用于配置是否展示树结构。

参数值说明：true表示展示树结构，false表示不展示树结构。

6、showSearch：用于配置是否可搜索。

参数值说明：true表示不可搜索，false表示可搜索。

7、placeholder：用于配置选择框默认文本。

参数值说明：默认值为请选择，支持用户配置。

8、value：用于指定当前选中的条目。

参数值说明：数组，是当前选择的数据。

9、onChange：在选中option，或input的value变化时，调用此函数。

参数值说明：函数，用于存储当前选择或者取消选择的数据。

10、options：数据化配置选项内容。

参数值说明：通过接口获取的需要下拉展示的数据。

下面以一具体实施例对本申请提供的下拉框交互方法进行说明。图6是根据另一示例性实施例示出的一种下拉框交互方法的流程示意图，如图6所示，本实施例提供的下拉框交互方法包括以下步骤：

步骤S201，在构建目标下拉框的过程中，获取目标下拉框对应的下拉框配置参数。

步骤S202，对下拉框配置参数进行解析以获得目标下拉框对应的数据源接口、添加组件、展示方式、预设数量、刷新组件、搜索组件和全选组件。

步骤S203，基于数据源接口、添加组件、展示方式、刷新组件、搜索组件和全选组件对目标下拉框进行配置。

该步骤具体包括：调用数据源接口以获得多个选项，并将多个选项映射至展开区；按照展示方式，将添加组件在展开区中进行配置，以在展开区中展示添加控件；将刷新组件在展开区中进行配置，以在展开区中展示刷新按钮；将搜索组件在展开区中进行配置，以在展开区中展示搜索框；将全选组件在展开区中进行配置，以在展开区中展示全选按钮。

其中，操作电子设备的用户既可以触发添加控件从而触发电子设备执行步骤S204-S205，以添加新的选项；还可以触发刷新按钮从而触发电子设备执行步骤S206，以刷新选项；还可以在搜索框中输入关键字从而触发电子设备执行步骤S207，以搜索与关键字匹配的选项；还可以触发全选按钮从而触发电子设备执行步骤S208，以全选选项；还可以选择展开区中的任一选项，从而触发电子设备执行步骤S209-步骤S211。

步骤S204，响应于添加控件被触发，获取所输入的选项信息，并向服务器发送选项信息，以使服务器存储选项信息。

步骤S205，在接收到服务器发送的存储成功信息的情况下，对展开区进行刷新展示。

步骤S206，响应于刷新按钮被触发，调用数据源接口以获得最新的多个选项，并将最新的多个选项映射至展开区。

步骤S207，获取在搜索框中输入的关键字，并向服务器发送关键字，接收服务器发送的与关键字匹配的选项，在展开区中对选项进行高亮展示。

步骤S208，响应于全选按钮被触发，将展开区中的选项均设置为被选中状态。

步骤S209，响应于展开区中的任一选项被选中，在收起区中展示被选中的选项对应的选项名称。

步骤S210，在被选中的选项的总数量超过预设数量的情况下，在收起区中展示目标数量以及预设数量个被选中的选项分别对应的选项名称；目标数量为总数量与预设数量之差。

步骤S211，响应于鼠标悬停在目标数量上，在收起区中，以气泡的样式展示除预设数量个被选中的选项以外的其他被选中的选项分别对应的选项名称。

在本实施例中，步骤S201-步骤S211的实现方式参见上述实施例，在此不再赘述。

图7是根据一示例性实施例示出的一种下拉框交互装置的结构示意图，如图7所示，本实施例中，下拉框交互装置300可以设置在电子设备中，下拉框交互装置300包括：

第一获取模块301，用于在构建目标下拉框的过程中，获取目标下拉框对应的下拉框配置参数，并对下拉框配置参数进行解析以获得目标下拉框对应的数据源接口和添加组件；数据源接口用于获取在目标下拉框的展开区中展示的选项，添加组件用于添加新的选项；

映射模块302，用于调用数据源接口以获得多个选项，并将多个选项映射至展开区；

配置模块303，用于将添加组件在展开区中进行配置，以在展开区中展示添加控件，添加控件用于在被触发时添加新的选项；

第二获取模块304，用于响应于添加控件被触发，获取所输入的选项信息，并向服务器发送选项信息，以使服务器存储选项信息，选项信息用于描述待添加的选项；

展示模块305，用于在接收到服务器发送的存储成功信息的情况下，对展开区进行刷新展示，存储成功信息用于表示存储选项信息成功。

可选地，下拉框配置参数还包括展示方式，展示方式为树结构方式或非树结构方式，在展示方式为非树结构方式的情况下，添加控件包括选项名称输入框、选项值输入框和添加按钮；

第二获取模块304，用于：

响应于添加按钮被触发，获取在选项名称输入框中输入的选项名称和在选项值输入框中输入的选项值。

可选地，在展示方式为树结构方式的情况下，添加控件包括父级选项选择按钮、选项名称输入框、选项值输入框和添加按钮；

第二获取模块304，用于：

响应于添加按钮被触发，获取基于父级选项选择按钮选择的父级选项、在选项名称输入框中输入的选项名称和在选项值输入框中输入的选项值。

可选地，第二获取模块304，用于：

响应于父级选项选择按钮被触发，在父级选项选择按钮周围的预设区域，展示展开区中展示的多个上级选项；

响应于任一上级选项被选中，将被选中的上级选项确定为父级选项。

可选地，展示模块305，用于：

调用数据源接口以获得最新的多个选项，并将最新的多个选项映射至展开区。

可选地，下拉框配置参数还包括预设数量，预设数量用于在目标下拉框的收起区中展示选项，收起区用于对被选中的选项进行展示；装置300还包括：

展示模块305，还用于响应于展开区中的任一选项被选中，在收起区中展示被选中的选项对应的选项名称；

展示模块305，还用于在被选中的选项的总数量超过预设数量的情况下，在收起区中展示目标数量以及预设数量个被选中的选项分别对应的选项名称；目标数量为总数量与预设数量之差；

展示模块305，还用于响应于鼠标悬停在目标数量上，在收起区中，以气泡的样式展示除预设数量个被选中的选项以外的其他被选中的选项分别对应的选项名称。

可选地，装置300还包括：

展示模块305，还用于在收起区中展示被选中的选项对应的选项名称时，还展示选项名称对应的取消选择按钮；

取消展示模块，用于响应于选项名称对应的取消选择按钮被触发，在收起区中，取消展示选项名称和取消选择按钮，并在展开区中，取消选择选项名称对应的选项。

可选地，下拉框配置参数还包括刷新组件，刷新组件用于刷新在目标下拉框中展示的选项；装置300还包括：

展示模块305，还用于将刷新组件在展开区中进行配置，以在展开区中展示刷新按钮；

映射模块302，还用于响应于刷新按钮被触发，调用数据源接口以获得最新的多个选项；将最新的多个选项映射至展开区。

本实施例提供的下拉框交互装置可以执行上述方法实施例的技术方案，其实现原理和技术效果与上述方法实施例类似，在此不再一一赘述。

本申请实施例还提供了一种电子设备。电子设备旨在各种形式的数字计算机，诸如，手机、电脑、智能穿戴设备、智能家居设备、膝上型计算机、台式计算机、工作台、个人数字助理和其它适合的计算机。

图8是根据一示例性实施例示出的一种电子设备的结构示意图。如图8所示，电子设备400包括：处理器401以及分别与处理器401通信连接的存储器402和收发器403。

存储器402存储有计算机执行指令；收发器403用于与服务器之间收发数据；处理器401执行存储器402存储的计算机执行指令，以实现本申请所提供的下拉框交互方法。

其中，本申请实施例中，存储器402和收发器403分别与处理器401通过总线连接。总线可以是工业标准体系结构(Industry Standard Architecture，ISA)总线、外部设备互连(Peripheral Component Interconnect，PCI)总线或扩展工业标准体系结构(ExtendedIndustry Standard Architecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。

在示例性实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有计算机执行指令，该计算机执行指令被处理器执行时用于实现本申请提供的下拉框交互方法。

在示例性实施例中，还提供了一种计算机程序产品，包括计算机执行指令，当该计算机程序产品中的计算机执行指令被处理器执行时用于实现本申请提供的下拉框交互方法。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于可选实施例，所涉及的动作和模块并不一定是本申请所必须的。

进一步需要说明的是，虽然流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

应该理解，上述的装置实施例仅是示意性的，本申请的装置还可通过其它的方式实现。例如，上述实施例中单元/模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如，多个单元、模块或组件可以结合，或者可以集成到另一个系统，或一些特征可以忽略或不执行。

另外，若无特别说明，在本申请各个实施例中的各功能单元/模块可以集成在一个单元/模块中，也可以是各个单元/模块单独物理存在，也可以两个或两个以上单元/模块集成在一起。上述集成的单元/模块既可以采用硬件的形式实现，也可以采用软件程序模块的形式实现。

集成的单元/模块如果以硬件的形式实现时，该硬件可以是数字电路，模拟电路等等。硬件结构的物理实现包括但不局限于晶体管，忆阻器等等。若无特别说明，处理器可以是任何适当的硬件处理器，比如中央处理器(Central Processing Unit，CPU)、图形处理器(Graphics Processing Unit，GPU)、专用集成电路(Application Specific IntegratedCircuit，ASIC)、数字信号处理器(Digital Signal Processor，DSP)、可编程逻辑器件(Programmable Logic Device，PLD)、现场可编程门阵列(Field Programmable GateArray，FPGA)、控制器、微控制器、微处理器或其他电子元件。若无特别说明，存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如U盘、随机存取存储器(Random-Access Memory，RAM)、静态随机存取存储器(Static Random-Access Memory，SRAM)，动态随机存取存储器(Dynamic Random-Access Memory，DRAM)，增强动态随机存取存储器(Enhanced Dynamic Random-Access Memory，EDRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM)，可编程只读存储器(Programmable read-only memory，PROM)，只读存储器(Read-Only Memory，ROM)，阻变式存储器(Resistive Random Access Memory，RRAM)，高带宽内存HBM(High-BandwidthMemory)，混合存储立方HMC(Hybrid Memory Cube)，磁存储器，快闪存储器，磁盘、光盘、移动硬盘或磁碟等各种可以存储程序代码的介质。

集成的单元/模块如果以软件程序模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储器中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例方法的全部或部分步骤。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。上述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求书指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求书来限制。