[发明专利]下拉列表显示方法和装置

说明书

本发明实施例公开了一种下拉列表显示方法，用于提升ui‑select下拉列表的用户操作体验。本发明实施例方法包括：下拉列表显示装置接收第一点击指令，根据所述第一点击指令显示该第二下拉列表。接收第二点击指令，根据第二点击指令将第一下拉列表的待设置条件设置为目标值，并隐藏第二下拉列表。下拉列表显示装置能够获知第二点击指令的点击位置，并认为该点击位置位于第一下拉列表所嵌套的第二下拉列表内部。因此，第一下拉列表不会被关闭。用户可以直接点击第一下拉列表中的确定按钮，即可完成第一下拉列表中的待设置条件的设置操作。本发明实施例还提供了相关的下拉列表显示装置。

技术领域

本发明涉及网络开发领域，尤其涉及一种下拉列表显示方法和装置。

背景技术

Angular Ui Bootstrap是一套适用于angular框架的前端开发框架。Angular UiBootstrap中的下拉列表组件采用Bootstrap dropdown下拉列表。

Bootstrap dropdown下拉列表支持自动关闭(auto-close)属性。当auto-close属性设置为outsideClick时，若Bootstrap dropdown下拉列表接收到点击指令，则会判断该点击指令是位于Bootstrap dropdown下拉列表的内部还是外部，若该点击指令位于Bootstrap dropdown下拉列表的外部，则将展开的Bootstrap dropdown下拉列表关闭。

angular框架中还存在Ui-grid表格插件，该插件可以视为一种能够提供过滤功能的表格。在使用Ui-grid表格插件时，经常会出现在Bootstrap dropdown下拉列表内嵌套ui-select下拉列表的情况。

但是在现有的下拉列表处理机制中，当用户点击ui-select下拉列表中的某一项后，ui-select下拉列表即会自动关闭。这样Bootstrap dropdown下拉列表检测不到本次点击行为发生的位置，进而会认为该点击不位于Bootstrap dropdown下拉列表内，于是触发auto-close功能将Bootstrap dropdown下拉列表自动关闭。用户需要再次展开Bootstrapdropdown下拉列表，点击确定按钮，才能完成过滤设置。这样就使得ui-select下拉列表的设置操作较为复杂，用户体验不好。

发明内容

本发明实施例提供了一种下拉列表显示方法，用于提高ui-select下拉列表的操作便捷性。本发明还提供了相关的下拉列表显示装置。

本发明实施例提供的下拉列表显示方法包括：

接收第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮；

根据所述第一点击指令，显示所述第一下拉列表嵌套的第二下拉列表，所述第二下拉列表中包括所述待设置条件的多个备选值；

接收第二点击指令，所述第二点击指令用于选中所述多个备选值中的目标值；

根据所述第二点击指令，隐藏所述第二下拉列表，并将所述第一下拉列表的待设置条件设置为所述目标值。

本发明实施例提供的下拉列表显示装置包括：

指令接收模块，用于接收第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮；

列表显示模块，用于根据所述第一点击指令，显示所述第一下拉列表嵌套的第二下拉列表，所述第二下拉列表中包括所述待设置条件的多个备选值；

所述指令接收模块，还用于接收第二点击指令，所述第二点击指令用于选中所述多个备选值中的目标值；

所述列表显示模块，还用于根据所述第二点击指令，隐藏所述第二下拉列表，并将所述第一下拉列表的待设置条件设置为所述目标值。