CN108733279A - 下拉列表显示方法和装置 - Google Patents

下拉列表显示方法和装置 Download PDF

Info

Publication number
CN108733279A
CN108733279A CN201710260162.2A CN201710260162A CN108733279A CN 108733279 A CN108733279 A CN 108733279A CN 201710260162 A CN201710260162 A CN 201710260162A CN 108733279 A CN108733279 A CN 108733279A
Authority
CN
China
Prior art keywords
drop
down list
click commands
click
list display
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710260162.2A
Other languages
English (en)
Inventor
张星
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201710260162.2A priority Critical patent/CN108733279A/zh
Publication of CN108733279A publication Critical patent/CN108733279A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

下拉列表显示方法和装置
技术领域
本发明涉及网络开发领域,尤其涉及一种下拉列表显示方法和装置。
背景技术
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下拉列表的操作便捷性。本发明还提供了相关的下拉列表显示装置。
本发明实施例提供的下拉列表显示方法包括:
接收第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮;
根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表,所述第二下拉列表中包括所述待设置条件的多个备选值;
接收第二点击指令,所述第二点击指令用于选中所述多个备选值中的目标值;
根据所述第二点击指令,隐藏所述第二下拉列表,并将所述第一下拉列表的待设置条件设置为所述目标值。
本发明实施例提供的下拉列表显示装置包括:
指令接收模块,用于接收第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮;
列表显示模块,用于根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表,所述第二下拉列表中包括所述待设置条件的多个备选值;
所述指令接收模块,还用于接收第二点击指令,所述第二点击指令用于选中所述多个备选值中的目标值;
所述列表显示模块,还用于根据所述第二点击指令,隐藏所述第二下拉列表,并将所述第一下拉列表的待设置条件设置为所述目标值。
本发明实施例中,下拉列表显示装置接收第一点击指令,根据所述第一点击指令显示该第二下拉列表。接收第二点击指令,根据第二点击指令将第一下拉列表的待设置条件设置为目标值,并隐藏第二下拉列表。由于本实施例中下拉列表显示装置在接收到第二点击指令后,隐藏第二下拉列表而不是将第二下拉列表关闭,故下拉列表显示装置能够获知第二点击指令的点击位置,并认为该点击位置位于第一下拉列表所嵌套的第二下拉列表内部。因此,第一下拉列表不会被关闭。用户可以直接点击第一下拉列表中的确定按钮,即可完成第一下拉列表中的待设置条件的设置操作。与现有技术中用户需要再次展开第一下拉列表才能完成设置操作相比,本发明实施例简化了下拉列表的设置操作,提高了用户体验。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例中下拉列表显示方法一个实施例流程图;
图2为本发明实施例中下拉列表显示方法另一个实施例流程图;
图3为本发明实施例中嵌套下拉列表一个示意图;
图4为本发明实施例中下拉列表显示装置一个实施例结构图;
图5为本发明实施例中下拉列表显示装置另一个实施例结构图。
具体实施方式
本发明提供了一种下拉列表显示方法,用于提高ui-select下拉列表的操作便捷性。本发明还提供了相关的下拉列表显示装置,以下将分别进行描述。
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明实施例提供的下拉列表显示方法的基本流程请参阅图1,包括:
101、接收第一点击指令。
用户界面中已显示第一下拉列表,该第一下拉列表中包括待设置条件。下拉列表显示装置接收第一点击指令,该第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮。
其中,该第一点击指令可以为鼠标点击该设置按钮的指令,也可以为其它形式的指令,此处不做限定。
102、显示第一下拉列表嵌套的第二下拉列表。
第一下拉列表中嵌套有第二下拉列表,下拉列表显示装置在接收到第一点击指令后,根据所述第一点击指令显示该第二下拉列表。其中,第二下拉列表中包括第一下拉列表的待设置条件的多个备选值。
103、接收第二点击指令。
下拉列表显示装置接收第二点击指令,该第二点击指令用于选中第二下拉列表的多个备选值中的目标值。
其中,第二点击指令可以为鼠标点击该目标值的指令,也可以为其它形式的指令,此处不做限定。
104、隐藏第二下拉列表,并将第一下拉列表的待设置条件设置为目标值。
下拉列表显示装置在接收到第二点击指令后,根据第二点击指令将第一下拉列表的待设置条件设置为目标值,并隐藏第二下拉列表。其中,隐藏第二下拉列表指的是不显示第二下拉列表的图像,但是并不删除第二下拉列表的相关数据。
本实施例中,下拉列表显示装置接收第一点击指令,根据所述第一点击指令显示该第二下拉列表。接收第二点击指令,根据第二点击指令将第一下拉列表的待设置条件设置为目标值,并隐藏第二下拉列表。由于本实施例中下拉列表显示装置在接收到第二点击指令后,隐藏第二下拉列表而不是将第二下拉列表关闭,故下拉列表显示装置能够获知第二点击指令的点击位置,并认为该点击位置位于第一下拉列表所嵌套的第二下拉列表内部。因此,第一下拉列表不会被关闭。用户可以直接点击第一下拉列表中的确定按钮,即可完成第一下拉列表中的待设置条件的设置操作。与现有技术中用户需要再次展开第一下拉列表才能完成设置操作相比,本实施例简化了下拉列表的设置操作,提高了用户体验。
可选的,第一下拉列表可以为具有auto-close属性的下拉列表,且其auto-close属性设置为outsideClick。这样当第一下拉列表接收到点击指令时,则会判断该点击指令是位于第一下拉列表的内部还是外部,若该点击指令位于第一下拉列表的外部,则将展开的第一下拉列表关闭。
可选的,本发明实施例可以应用在Angular Ui Bootstrap框架中,所述第一下拉列表可以为Bootstrap dropdown下拉列表。
可选的,在Angular Ui Bootstrap框架中,若第一下拉列表为Bootstrapdropdown下拉列表,则其嵌套的第二下拉列表可以为ui-select下拉列表。
本发明实施例2以Angular Ui Bootstrap为例提供了一种更为详尽的下拉列表显示方法,请参阅图2,包括:
201、接收第一点击指令。
用户界面中已显示Bootstrap dropdown下拉列表,该Bootstrap dropdown下拉列表中包括待设置条件。下拉列表显示装置接收第一点击指令,该第一点击指令用于选中Bootstrap dropdown下拉列表中的待设置条件的设置按钮。
其中,该第一点击指令可以为鼠标点击该设置按钮的指令,也可以为其它形式的指令,此处不做限定。
202、显示ui-select下拉列表。
Bootstrap dropdown下拉列表中嵌套有ui-select下拉列表,当下拉列表显示装置接收到第一点击指令后,触发显示该ui-select下拉列表。其中,该ui-select下拉列表中包括Bootstrap dropdown下拉列表中的待设置条件的多个备选值。
可选的,现阶段的ui-select下拉列表的程序代码中包括ng-if指令,该ng-if指令用于:当Bootstrap dropdown下拉列表中的待设置条件的设置按钮被选中时置为true,以触发显示ui-select下拉列表。
与现阶段的程序代码不同的,本实施例中ui-select下拉列表的程序代码不采用ng-if指令,改为采用ng-show指令。ng-show指令同样用于:当Bootstrap dropdown下拉列表中的待设置条件的设置按钮被选中时置为真实值true,以触发显示ui-select下拉列表。其中,ng-show指令的真实值一般用true来表示,但也可以通过其它方式来表示ng-show指令的真实值,如用1来表示ng-show指令的真实值等,本发明中不做限定。
203、接收第二点击指令。
下拉列表显示装置接收第二点击指令,该第二点击指令用于选中ui-select下拉列表的多个备选值中的目标值。
其中,第二点击指令可以为鼠标点击该目标值的指令,也可以为其它形式的指令,此处不做限定。
204、隐藏ui-select下拉列表,并将Bootstrap dropdown下拉列表的待设置条件设置为目标值。
下拉列表显示装置在接收到第二点击指令后,根据第二点击指令将Bootstrapdropdown下拉列表的待设置条件设置为目标值,并隐藏ui-select下拉列表。其中,隐藏ui-select下拉列表指的是不显示ui-select下拉列表,但是并不删除ui-select下拉列表的相关数据。
具体的,隐藏ui-select下拉列表指的可以是隐藏ui-select下拉列表的html。但下拉列表显示装置并不删除ui-select下拉列表的html。Bootstrap dropdown下拉列表在后台仍能够获取到ui-select下拉列表的html。
可选的,现阶段的ui-select下拉列表的程序代码中包括ng-if指令。当接收到第二点击指令后,该ng-if指令置为false,这会触发关闭ui-select下拉列表,并删除ui-select下拉列表的html。因此现有技术中在点击ui-select下拉列表的多个备选值中的目标值后,Bootstrap dropdown下拉列表获取不到点击的html元素,故检测不到本次点击行为发生的位置,进而会认为该点击不位于Bootstrap dropdown下拉列表内,于是触发auto-close功能将Bootstrap dropdown下拉列表自动关闭。
与现阶段的程序代码不同,本实施例中的ui-select下拉列表的程序代码采用ng-show指令。当接收到第二点击指令后,该ng-show指令置为错误值。而ng-show指令置为错误值时,会触发隐藏ui-select下拉列表,即隐藏但不删除并删除ui-select下拉列表的html。其中,ng-show指令的错误值一般用false来表示,但也可以通过其它方式来表示ng-show指令的错误值,如用0来表示ng-show指令的错误值等,本发明中不做限定。
由于ui-select下拉列表的html只是被隐藏并没有被删除,故Bootstrapdropdown下拉列表在后台仍能够获取到ui-select下拉列表的html。这样,Bootstrapdropdown下拉列表就能够获取到第二点击指令所选中的html元素,进而确定第二点击指令的行为发生在Bootstrap dropdown下拉列表内。这样就不会触发Bootstrap dropdown下拉列表的auto-close功能。Bootstrap dropdown下拉列表不会自动关闭,而是会响应该第二点击指令,将待设置条件设置为选中的目标值。
可选的,本实施例还可以包括如下步骤:
205、接收第三点击指令;
下拉列表显示装置接收第二点击指令,该第二点击指令用于选中Bootstrapdropdown下拉列表中的确定按钮。
其中,第三点击指令可以为鼠标点击该确定按钮的指令,也可以为其它形式的指令,此处不做限定。
206、关闭Bootstrap dropdown下拉列表。
下拉列表显示装置在接收到第三点击指令后,根据第三点击指令关闭Bootstrapdropdown下拉列表。
本实施例中,下拉列表显示装置接收第一点击指令,根据所述第一点击指令显示ui-select下拉列表。接收第二点击指令,根据第二点击指令将Bootstrap dropdown下拉列表的待设置条件设置为目标值,并隐藏ui-select下拉列表。由于本实施例中下拉列表显示装置在接收到第二点击指令后,隐藏ui-select下拉列表而不是将ui-select下拉列表关闭,故下拉列表显示装置能够获知第二点击指令的点击位置,并认为该点击位置位于Bootstrap dropdown下拉列表所嵌套的第ui-select下拉列表内部。因此,Bootstrapdropdown下拉列表不会被关闭。用户可以直接点击Bootstrap dropdown下拉列表中的确定按钮,即可完成Bootstrap dropdown下拉列表中的待设置条件的设置操作。与现有技术中用户需要再次展开Bootstrap dropdown下拉列表才能完成设置操作相比,本实施例简化了下拉列表的设置操作,提高了用户体验。
其中,实施例2仅以第一下拉列表为Bootstrap dropdown下拉列表、第二下拉列表为ui-select下拉列表为例,对本申请提供的方法进行描述。但实施例2并不对第一下拉列表和第二下拉列表进行限定。在实际应用中,第一下拉列表也可以为除Bootstrapdropdown以外的下拉列表、第二下拉列表也可以为除ui-select以外的下拉列表。
为了便于理解上述实施例,下面将以一个具体的应用场景为例进行描述。
请参阅图3所示的嵌套下拉列表示意图。首先点击图3“媒体”单元格中右侧的漏斗图标,即可启动Bootstrap dropdown下拉列表(如标示为“设置过滤条件”的方框所示)。该Bootstrap dropdown下拉列表用于设置媒体的过滤条件。该Bootstrap dropdown下拉列表中标示为“包含”的白色方框即为媒体的一个过滤条件。
点击“包含”过滤条件中的倒三角图标,即可将ui-select下拉列表中的ng-show指令置为true,触发启动ui-select下拉列表。图3中该ui-select下拉列表位于“包含”过滤条件的下方,共包括包含、不包含、等于、不等于、起始于……、结束于……六个备选值。当鼠标移动到某一个备选值(如包含)上时,该备选值会显示为灰色,且“包含”过滤条件处也显示该备选值。
点击该六个备选值中需要选中的目标值,则ui-select下拉列表中的ng-show指令置为false,触发隐藏ui-select下拉列表的html。于是ui-select下拉列表从显示界面中消失。但Bootstrap dropdown下拉列表在后台仍然能够根据ui-select下拉列表的html确定该点击选中了目标值。于是Bootstrap dropdown下拉列表将“包含”过滤条件设置为目标值。
点击Bootstrap dropdown下拉列表中的确定按钮(图3中因被ui-select下拉列表遮挡故未出示),关闭Bootstrap dropdown下拉列表。
上面的实施例介绍了本申请提供的下拉列表显示方法,下面将介绍本申请提供的用于实现上述方法的下拉列表显示装置。请参阅图4,本申请提供的下拉列表显示装置的基本结构包括:
指令接收模块401,用于接收第一点击指令,所述第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮;
列表显示模块402,用于根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表,所述第二下拉列表中包括所述待设置条件的多个备选值;
所述指令接收模块401,还用于接收第二点击指令,所述第二点击指令用于选中所述多个备选值中的目标值;
所述列表显示模块402,还用于根据所述第二点击指令,将所述第一下拉列表的待设置条件设置为所述目标值,并隐藏所述第二下拉列表。
本实施例中,指令接收模块401接收第一点击指令,列表显示模块402根据所述第一点击指令显示该第二下拉列表。指令接收模块401接收第二点击指令,列表显示模块402根据第二点击指令将第一下拉列表的待设置条件设置为目标值,并隐藏第二下拉列表。由于本实施例中在指令接收模块401接收到第二点击指令后,列表显示模块402隐藏第二下拉列表而不是将第二下拉列表关闭,故第一下拉列表能够获知第二点击指令的点击位置,并认为该点击位置位于第一下拉列表所嵌套的第二下拉列表内部。因此,第一下拉列表不会被关闭。用户可以直接点击第一下拉列表中的确定按钮,即可完成第一下拉列表中的待设置条件的设置操作。与现有技术中用户需要再次展开第一下拉列表才能完成设置操作相比,本实施例简化了下拉列表的设置操作,提高了用户体验。
可选的,所述第一下拉列表为具有自动关闭功能的下拉列表。
可选的,所述第一下拉列表为Bootstrap dropdown下拉列表,所述第二下拉列表为ui-select下拉列表。
可选的,列表显示模块402在隐藏所述第二下拉列表时,具体隐藏所述第二下拉列表的超文本标记语言html元素。
可选的,所述第二下拉列表采用ng-show指令;
所述列表显示模块402具体用于:在所述指令接收模块接收到所述第一点击指令后,将所述ng-show指令置为真实值,使得所述第二下拉列表被显示;在所述指令接收模块接收到所述第二点击指令后,将所述ng-show指令置为错误值,使得所述第二下拉列表的html元素被隐藏。
可选的,所述指令接收模块401还用于:接收第三点击指令,所述第三点击指令用于选中所述第一下拉列表的确定按钮;所述列表显示模块402还用于:根据所述第三点击指令,关闭所述第一下拉列表。
图4所示的实施例的详细介绍可以参考图1和图2所示的方法实施例的相关描述,此处不做赘述。
可选的,所述下拉列表显示装置包括处理器和存储器,上述指令接收模块401、列表显示模块402等均作为程序模块存储在存储器中,由处理器执行存储在存储器中的上述程序模块来实现相应的功能。
处理器中包含内核,由内核去存储器中调取相应的程序模块。内核可以设置一个或以上,通过调整内核参数来简化下拉列表的设置操作。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM),存储器包括至少一个存储芯片。
图4所示的实施例从单元化功能实体的角度对本发明实施例中的下拉列表显示装置进行了描述,下面从硬件处理的角度对本发明实施例中的下拉列表显示装置进行描述,请参阅图5,本发明实施例中的下拉列表显示装置500另一实施例包括:
输入装置501、输出装置502、处理器503和存储器504(其中下拉列表显示装置500中的处理器503的数量可以一个或多个,图5中以一个处理器503为例)。在本发明的一些实施例中,输入装置501、输出装置502、处理器503和存储器504可通过总线或其它方式连接,其中,图5中以通过总线连接为例。
其中,通过调用存储器504存储的操作指令,处理器503用于执行如下步骤:
接收第一点击指令,所述第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮;
根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表,所述第二下拉列表中包括所述待设置条件的多个备选值;
接收第二点击指令,所述第二点击指令用于选中所述多个备选值中的目标值;
根据所述第二点击指令,将所述第一下拉列表的待设置条件设置为所述目标值,并隐藏所述第二下拉列表。
本发明的一些实施例中,所述第一下拉列表为具有自动关闭属性的下拉列表。
本发明的一些实施例中,处理器503还用于执行如下步骤:
隐藏所述第二下拉列表的超文本标记语言html元素。
本发明的一些实施例中,所述第二下拉列表采用ng-show指令;处理器503还用于执行如下步骤:
在接收到所述第一点击指令后,将所述ng-show指令置为真实值,使得所述第二下拉列表被显示;在接收到所述第二点击指令后,将所述ng-show指令置为错误值,使得所述第二下拉列表的html元素被隐藏。
本发明的一些实施例中,处理器503还用于执行如下步骤:
接收第三点击指令,所述第三点击指令用于选中所述第一下拉列表的确定按钮;
根据所述第三点击指令,关闭所述第一下拉列表。
图5所示的实施例的详细介绍可以参考图1和图2所示的方法实施例的相关描述,此处不做赘述。
本发明实施例提供了一种存储介质,其上存储有程序,该程序被处理器执行时实现所述下拉列表显示方法。
本发明实施例提供了一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行所述下拉列表显示方法。
本发明实施例提供了一种设备,设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序,处理器执行程序时实现以下步骤:
接收第一点击指令,所述第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮;
根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表,所述第二下拉列表中包括所述待设置条件的多个备选值;
接收第二点击指令,所述第二点击指令用于选中所述多个备选值中的目标值;
根据所述第二点击指令,将所述第一下拉列表的待设置条件设置为所述目标值,并隐藏所述第二下拉列表。
隐藏所述第二下拉列表的超文本标记语言html元素。
所述第二下拉列表采用ng-show指令;在接收到所述第一点击指令后,将所述ng-show指令置为真实值,使得所述第二下拉列表被显示;在接收到所述第二点击指令后,将所述ng-show指令置为错误值,使得所述第二下拉列表的html元素被隐藏。
接收第三点击指令,所述第三点击指令用于选中所述第一下拉列表的确定按钮;
根据所述第三点击指令,关闭所述第一下拉列表。
本文中的设备可以是服务器、PC、PAD、手机等。
本申请还提供了一种计算机程序产品,当在数据处理设备上执行时,适于执行初始化有如下方法步骤的程序代码:接收第一点击指令,所述第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮;
根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表,所述第二下拉列表中包括所述待设置条件的多个备选值;
接收第二点击指令,所述第二点击指令用于选中所述多个备选值中的目标值;
根据所述第二点击指令,将所述第一下拉列表的待设置条件设置为所述目标值,并隐藏所述第二下拉列表。
隐藏所述第二下拉列表的超文本标记语言html元素。
所述第二下拉列表采用ng-show指令;在接收到所述第一点击指令后,将所述ng-show指令置为真实值,使得所述第二下拉列表被显示;在接收到所述第二点击指令后,将所述ng-show指令置为错误值,使得所述第二下拉列表的html元素被隐藏。
接收第三点击指令,所述第三点击指令用于选中所述第一下拉列表的确定按钮;
根据所述第三点击指令,关闭所述第一下拉列表。
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白,本申请的实施例可提供为方法、系统或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种下拉列表显示方法,其特征在于,包括:
接收第一点击指令,所述第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮;
根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表,所述第二下拉列表中包括所述待设置条件的多个备选值;
接收第二点击指令,所述第二点击指令用于选中所述多个备选值中的目标值;
根据所述第二点击指令,将所述第一下拉列表的待设置条件设置为所述目标值,并隐藏所述第二下拉列表。
2.根据权利要求1所述的下拉列表显示方法,其特征在于,所述第一下拉列表为具有自动关闭属性的下拉列表。
3.根据权利要求2所述的下拉列表显示方法,其特征在于,所述隐藏所述第二下拉列表包括:
隐藏所述第二下拉列表的超文本标记语言html元素。
4.根据权利要求3所述的下拉列表显示方法,其特征在于,所述第二下拉列表采用ng-show指令;
所述根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表包括:在接收到所述第一点击指令后,将所述ng-show指令置为真实值,使得所述第二下拉列表被显示;
所述根据所述第二点击指令,隐藏所述第二下拉列表包括:在接收到所述第二点击指令后,将所述ng-show指令置为错误值,使得所述第二下拉列表的html元素被隐藏。
5.根据权利要求1至4中任一项所述的下拉列表显示方法,其特征在于,所述方法还包括:
接收第三点击指令,所述第三点击指令用于选中所述第一下拉列表的确定按钮;
根据所述第三点击指令,关闭所述第一下拉列表。
6.一种下拉列表显示装置,其特征在于,包括:
指令接收模块,用于接收第一点击指令,所述第一点击指令用于选中第一下拉列表中的待设置条件的设置按钮;
列表显示模块,用于根据所述第一点击指令,显示所述第一下拉列表嵌套的第二下拉列表,所述第二下拉列表中包括所述待设置条件的多个备选值;
所述指令接收模块,还用于接收第二点击指令,所述第二点击指令用于选中所述多个备选值中的目标值;
所述列表显示模块,还用于根据所述第二点击指令,将所述第一下拉列表的待设置条件设置为所述目标值,并隐藏所述第二下拉列表。
7.根据权利要求6所述的下拉列表显示装置,其特征在于,所述第一下拉列表为具有自动关闭功能的下拉列表。
8.根据权利要求7所述的下拉列表显示装置,其特征在于,所述列表显示模块还用于:
隐藏所述第二下拉列表的超文本标记语言html元素。
9.根据权利要求8所述的下拉列表显示装置,其特征在于,所述第二下拉列表采用ng-show指令;
所述列表显示模块具体用于:在所述指令接收模块接收到所述第一点击指令后,将所述ng-show指令置为真实值,使得所述第二下拉列表被显示;在所述指令接收模块接收到所述第二点击指令后,将所述ng-show指令置为错误值,使得所述第二下拉列表的html元素被隐藏。
10.根据权利要求6至9中任一项所述的下拉列表显示装置,其特征在于,所述指令接收模块还用于:接收第三点击指令,所述第三点击指令用于选中所述第一下拉列表的确定按钮;
所述列表显示模块还用于:根据所述第三点击指令,关闭所述第一下拉列表。
CN201710260162.2A 2017-04-19 2017-04-19 下拉列表显示方法和装置 Pending CN108733279A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710260162.2A CN108733279A (zh) 2017-04-19 2017-04-19 下拉列表显示方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710260162.2A CN108733279A (zh) 2017-04-19 2017-04-19 下拉列表显示方法和装置

Publications (1)

Publication Number Publication Date
CN108733279A true CN108733279A (zh) 2018-11-02

Family

ID=63933269

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710260162.2A Pending CN108733279A (zh) 2017-04-19 2017-04-19 下拉列表显示方法和装置

Country Status (1)

Country Link
CN (1) CN108733279A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109976862A (zh) * 2019-03-29 2019-07-05 努比亚技术有限公司 一种多个PreferenceFragment列表的实现方法、装置、终端及存储介质
CN114527969A (zh) * 2022-01-25 2022-05-24 孚瑞肯电气(深圳)有限公司 一种可以将列表单元格转换成下拉列表形式输入的方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1818844A (zh) * 2004-12-13 2006-08-16 西门子公司 图形操作界面的下拉菜单中的菜单选项
CN103649897A (zh) * 2011-07-14 2014-03-19 微软公司 用于基于上下文的菜单系统的子菜单
CN103677530A (zh) * 2012-09-17 2014-03-26 腾讯科技(深圳)有限公司 菜单显示方法和装置
US9292160B2 (en) * 2012-11-30 2016-03-22 Verizon and Redbox Digital Entertainment Services, LLC Systems and methods for presenting media program accessibility information

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1818844A (zh) * 2004-12-13 2006-08-16 西门子公司 图形操作界面的下拉菜单中的菜单选项
CN103649897A (zh) * 2011-07-14 2014-03-19 微软公司 用于基于上下文的菜单系统的子菜单
CN103677530A (zh) * 2012-09-17 2014-03-26 腾讯科技(深圳)有限公司 菜单显示方法和装置
US9292160B2 (en) * 2012-11-30 2016-03-22 Verizon and Redbox Digital Entertainment Services, LLC Systems and methods for presenting media program accessibility information

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
LGH: "AngularJS基础ng-show指令简单示例", 《脚本之家HTTPS://WWW.JB51.NET/ARTICLE/89734.HTM》 *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109976862A (zh) * 2019-03-29 2019-07-05 努比亚技术有限公司 一种多个PreferenceFragment列表的实现方法、装置、终端及存储介质
CN109976862B (zh) * 2019-03-29 2023-11-10 努比亚技术有限公司 一种多个PreferenceFragment列表的实现方法、装置、终端及存储介质
CN114527969A (zh) * 2022-01-25 2022-05-24 孚瑞肯电气(深圳)有限公司 一种可以将列表单元格转换成下拉列表形式输入的方法
CN114527969B (zh) * 2022-01-25 2023-08-18 孚瑞肯电气(深圳)有限公司 一种可以将列表单元格转换成下拉列表形式输入的方法

Similar Documents

Publication Publication Date Title
US10261659B2 (en) Orbit visualization for displaying hierarchical data
US9348563B1 (en) Bi-directional editing between visual screen designer and source code
CN109446570B (zh) 业务流程展示方法、装置、计算机设备以及存储介质
US8881032B1 (en) Grouped tab document interface
CN104238897B (zh) 一种菜单项显示方法及装置
US10514910B2 (en) Automatically mapping data while designing process flows
CN106802894B (zh) 文件归纳方法与设备
CN110333918B (zh) 一种管理寄宿程序的方法与设备
US20140181756A1 (en) Visualization interaction design for cross-platform utilization
KR20180100276A (ko) 머신 비전 시스템들을 위한 비주얼 프로그램을 제공하기 위한 장치들, 시스템들 및 방법들
US8898592B2 (en) Grouping expanded and collapsed rows in a tree structure
CN103955475B (zh) 一种网页标签信息的显示方法、装置和浏览器
WO2016070726A1 (zh) 页面标签的加载方法、装置和浏览器客户端
WO2016177255A1 (zh) 一种数据批量处理的方法及装置
CN109558323A (zh) 用于调试页面的系统、方法和装置
CN110928626A (zh) 一种界面切换方法、装置及电子设备
WO2015057460A1 (en) Graphical user interface
CN107766106B (zh) 生成配置文件的方法和装置
US10365798B1 (en) Feedback manager for integration with an application
CN106354378B (zh) 一种快速选中多个目标的方法和装置
CN109710622A (zh) 一种数据更新方法、装置和系统
CN109542553A (zh) 用户界面ui元素的信息抓取方法及装置、及存储介质
CN108733279A (zh) 下拉列表显示方法和装置
CN110110000A (zh) 展示方法及装置
US9043464B1 (en) Automatically grouping resources accessed by a user

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information
CB02 Change of applicant information

Address after: 100080 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing

Applicant after: Beijing Guoshuang Technology Co.,Ltd.

Address before: 100086 Cuigong Hotel, 76 Zhichun Road, Shuangyushu District, Haidian District, Beijing

Applicant before: Beijing Guoshuang Technology Co.,Ltd.

RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20181102