[發明專利]下拉列表顯示方法和裝置

在審

• 申請號: 201710260162.2
• 申請日: 2017-04-19
• 公開（公告）號: CN108733279A
• 公開（公告）日: 2018-11-02
• 發明（設計）人: 張星
• 申請（專利權）人: 北京國雙科技有限公司
• 主分類號: G06F3/0482
• 分類號: G06F3/0482
• 代理公司: 北京集佳知識產權代理有限公司 11227
• 代理人: 王寶筠

本發明實施例公開了一種下拉列表顯示方法，用于提升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下拉列表的操作便捷性。本發明還提供了相關的下拉列表顯示裝置。

本發明實施例提供的下拉列表顯示方法包括：

接收第一點擊指令用于選中第一下拉列表中的待設置條件的設置按鈕；

根據所述第一點擊指令，顯示所述第一下拉列表嵌套的第二下拉列表，所述第二下拉列表中包括所述待設置條件的多個備選值；

接收第二點擊指令，所述第二點擊指令用于選中所述多個備選值中的目標值；

根據所述第二點擊指令，隱藏所述第二下拉列表，并將所述第一下拉列表的待設置條件設置為所述目標值。

本發明實施例提供的下拉列表顯示裝置包括：

指令接收模塊，用于接收第一點擊指令用于選中第一下拉列表中的待設置條件的設置按鈕；

列表顯示模塊，用于根據所述第一點擊指令，顯示所述第一下拉列表嵌套的第二下拉列表，所述第二下拉列表中包括所述待設置條件的多個備選值；

所述指令接收模塊，還用于接收第二點擊指令，所述第二點擊指令用于選中所述多個備選值中的目標值；

所述列表顯示模塊，還用于根據所述第二點擊指令，隱藏所述第二下拉列表，并將所述第一下拉列表的待設置條件設置為所述目標值。