Pull-down selector option expansion method and device, storage medium and program product

Abstract

The invention provides a pull-down selector option expansion method and device, a storage medium and a program product. The pull-down selector option expansion method comprises the steps that the number of options of a pull-down selector is obtained; comparing the number of the options with a preset display threshold value; if the number of the options is smaller than or equal to a display threshold value, displaying the options in a manner of pulling down a list; if the number of the options is larger than the display threshold value, the options are displayed in a two-dimensional tiling mode. According to the method, the display mode can be dynamically adjusted according to the number of the options, when the number of the options is small, the options are displayed in a pull-down list mode, a user can quickly find the needed options through rolling, and the operation complexity of the user is reduced; when the number of the options is large, the options are displayed in a two-dimensional tiling mode, so that an overlong rolling list can be effectively avoided, a user can more visually see more options on a page, rapid positioning and selection are facilitated, user experience and selection operation efficiency are improved, and the user can conveniently find the target option.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device, storage medium and program product for expanding selection items of a drop-down selector. Background Art

[0002] In daily software interfaces, drop-down selectors are often used. You can click to expand the drop-down list to list the selectable items, and the user can select the target option by clicking.

[0003] When there are many options in the drop-down selector, a vertical scroll bar will appear in the drop-down component. Users can scroll the bar to find the target option and then select it. If there are many options in the drop-down selector, the options are displayed in a drop-down manner. The efficiency of finding the target option by scrolling is relatively low, and users cannot quickly locate the target option. Summary of the invention

[0004] In view of the deficiencies in the prior art, the present invention provides a method, device, storage medium and program product for expanding options in a drop-down selector, aiming to help users quickly find target options and improve selection efficiency.

[0005] In order to achieve the above purpose and other advantages, the present invention adopts the following technical solutions:

[0006] In a first aspect, the present invention provides a method for expanding selection items of a drop-down selector, comprising:

[0007] Get the number of selected items in the drop-down selector;

[0008] Comparing the number of selection items with a preset display threshold;

[0009] If the number of options is less than or equal to the display threshold, the options are displayed in a drop-down list;

[0010] If the number of options is greater than the display threshold, the options are displayed in a two-dimensional tiling manner.

[0011] According to a method for expanding options of a drop-down selector provided by the present invention, when the options are displayed in a two-dimensional tiled manner, the options are loaded in the style of a two-dimensional list, and in response to a click event of the drop-down selector, a selection box is loaded below the drop-down selector, and the options are loaded and displayed in the style of a two-dimensional list.

[0012] According to a method for expanding options of a drop-down selector provided by the present invention, the step of loading a selection box below the drop-down selector and loading and displaying the options in a two-dimensional list style includes:

[0013] Obtain the horizontal width of the form area where the drop-down selector is located, the first distance between the selection box and the bottom of the display interface, and the width and height of a single selection item in the two-dimensional list;

[0014] Divide the horizontal width by the width, and round down the obtained value to obtain the first placement number in the horizontal direction of the two-dimensional list;

[0015] Divide the first distance by the height, and round down the obtained value to obtain a second placement number in the vertical direction of the two-dimensional list;

[0016] Multiplying the first placement number and the second placement number to obtain the number of first option placements;

[0017] Compare the number of the first options that can be placed with the number of options;

[0018] If the number of the first options that can be placed is greater than or equal to the number of options, the horizontal width is used as a boundary and the items are displayed vertically tiled toward the bottom of the display interface.

[0019] According to a method for expanding options of a drop-down selector provided by the present invention, if the number of the first options that can be placed is less than the number of options, the step of loading a selection box below the drop-down selector and loading and displaying the options in a two-dimensional list style also includes:

[0020] Acquire a second distance between the selection button and the side of the display interface, or take the horizontal distance of the display interface as the second distance;

[0021] Divide the second distance by the width, and round down the obtained value to obtain a third placement number in the horizontal direction of the two-dimensional list;

[0022] Multiplying the second placement number and the third placement number to obtain the number of second option placements;

[0023] Compare the number of the second options that can be placed with the number of options;

[0024] If the number of second options that can be placed is greater than or equal to the number of selection items, the height of the selection button from the bottom of the display interface is used as a boundary to horizontally tile the display interface to the side of the display interface.

[0025] According to a method for expanding options of a drop-down selector provided by the present invention, if the number of the second options that can be placed is less than the number of options, the step of loading a selection box below the drop-down selector and loading and displaying the options in a two-dimensional list style also includes:

[0026] Divide the number of options by the number of second options that can be placed, and round up the resulting value to obtain the number of display pages for the options;

[0027] A page number variable is established, the value of which is set to 1 by default, and a previous page button and a next page button are loaded outside the border of the two-dimensional list;

[0028] In response to a click event of the next page button, the page number variable is incremented by 1, and in response to a click event of the previous page button, the page number variable is decremented by 1;

[0029] When the page number variable is equal to 1, cancel the click event of the previous page button and set the previous page button to an inactive state;

[0030] When the page number variable is equal to the number of displayed pages, cancel the click event of the next page button and set the next page button to an inactive state;

[0031] When the page number variable is greater than 1 and less than the page number variable, both the previous page button and the next page button may respond to a click event and be set to an activated state.

[0032] According to a method for expanding options of a drop-down selector provided by the present invention, the two-dimensional list is set as a draggable component, and the two-dimensional list responds to a mouse drag and slide event, triggering the two-dimensional list to move on the page in a suspended form.

[0033] A method for expanding selection items of a drop-down selector provided by the present invention further includes:

[0034] According to the historical data, the number of times each of the options is selected by the user is counted as the priority value of the option;

[0035] The display order of the selection items in the drop-down selector is adjusted according to the priority values.

[0036] In a second aspect, the present invention provides an electronic device, the electronic device comprising:

[0037] One or more processors; and a memory storing computer program instructions, wherein when the computer program instructions are executed, the processor executes the steps of the method for expanding the selection items of the drop-down selector as described in any one of the above.

[0038] In a third aspect, the present invention provides a computer-readable storage medium having a computer program / instruction stored thereon, which, when executed by a processor, implements the steps of a method for expanding selection items of a drop-down selector as described in any one of the above.

[0039] In a fourth aspect, the present invention provides a computer program product, comprising a computer program / instruction, which, when executed by a processor, implements the steps of the method for expanding selection items of a drop-down selector as described in any one of the above.

[0040] The present invention provides a method, device, storage medium and program product for expanding options of a drop-down selector, which obtains the number of options of the drop-down selector; compares the number of options with a preset display threshold; if the number of options is less than or equal to the display threshold, displays the options in a drop-down list; if the number of options is greater than the display threshold, displays the options in a two-dimensional tiled manner. The present invention can dynamically adjust the display method according to the number of options. When the number of options is small, it is displayed in a drop-down list, and the user can quickly find the required options by scrolling, reducing the complexity of the user's operation; when the number of options is large, it is displayed in a two-dimensional tiled manner, which can effectively avoid an overly long scrolling list, allowing the user to more intuitively see more options on the page, which is convenient for quick positioning and selection. Therefore, the display threshold is flexibly adjusted according to actual needs to adapt to the needs of different scenarios, improve the user experience and selection operation efficiency, and facilitate users to find target options. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other implementation methods can be obtained based on these drawings without paying any creative work.

[0042] Figure 1 It is a flowchart of a method for expanding selection items of a drop-down selector provided by an embodiment of the present invention;

[0043] Figure 2 is a schematic diagram of displaying selection items in a drop-down list manner provided by an embodiment of the present invention;

[0044] Figure 3 It is a schematic diagram of displaying selection items in a scrolling search manner of a drop-down list provided by an embodiment of the present invention;

[0045] Figure 4 This is one of the schematic diagrams for displaying selection items in a two-dimensional tiling manner provided by an embodiment of the present invention;

[0046] Figure 5 This is the second schematic diagram of displaying selection items in a two-dimensional tiling manner provided by an embodiment of the present invention;

[0047] Figure 6This is a third schematic diagram of displaying selection items in a two-dimensional tiling manner provided by an embodiment of the present invention;

[0048] Figure 7 It is a structural schematic diagram of the electronic device provided by the present invention. DETAILED DESCRIPTION

[0049] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the following specifically cites a preferred embodiment and describes it in detail with the accompanying drawings as follows.

[0050] It should be noted that it is explicitly and implicitly understood by those of ordinary skill in the art that the embodiments described in the present invention can be combined with other embodiments without conflict. Unless otherwise defined, the technical terms or scientific terms involved in the present invention should be the usual meanings understood by people with ordinary skills in the technical field to which the present invention belongs. The words "one", "a", "a", "the" and the like involved in the present invention do not indicate a quantitative limitation and may represent the singular or plural. The terms "including", "comprising", "having" and any of their variations involved in the present invention are intended to cover non-exclusive inclusions; the terms "first", "second", "third", etc. involved in the present invention are merely to distinguish similar objects and do not represent a specific ordering of objects.

[0051] Reference Figure 1 As shown, an embodiment of the present invention provides a method for expanding selection items of a drop-down selector, comprising:

[0052] Step S1: Get the number of options in the drop-down selector;

[0053] Step S2: Compare the number of selection items with a preset display threshold;

[0054] If the number of options is less than or equal to the display threshold, step S3 is executed: the options are displayed in a drop-down list;

[0055] If the number of options is greater than the display threshold, step S4 is executed: the options are displayed in a two-dimensional tiling manner.

[0056] When there are fewer options in the drop-down selector, the options are displayed in a drop-down list. When there are more options in the drop-down selector, all options are expanded in a two-dimensional tiling manner to improve the efficiency of the drop-down selector.

[0057] Get the number of options in the drop-down selector, define it as selection_num, set the display threshold, let it be show_limit_num, and its value can be set according to the size of the display page of different terminals. For example, on smaller mobile devices, you may need to set a lower display threshold so that the options can be displayed in the limited page space without appearing too crowded. On larger desktop devices, you can set a higher display threshold to make full use of the available screen space, so as to ensure the best user experience on different devices.

[0058] When the drop-down selector expands the options, a comparison is made. If the number of options is less than or equal to the display threshold (i.e. selection_num≤show_limit_num), the options are displayed in a drop-down list. If the number of options is greater than the threshold for traditional display (i.e. selection_num>

[0059] show_limit_num), all options are expanded in a two-dimensional tiling manner, and the listing method of options is expanded from the one-dimensional expansion of the drop-down list (tiling in one direction) to the two-dimensional expansion (tiling in both horizontal and vertical directions), which fully utilizes the available space of the screen page, improves the efficiency of the drop-down selector, makes it easier for users to find target options, and improves the speed at which users select options.

[0060] In step S3, if Figure 2 As shown in the figure, when a drop-down list is used to display options, if there are many options, the options beyond the page display range will not be displayed on the page. In the drop-down list, the scroll bar is used to search for options, such as Figure 3 shown.

[0061] In this embodiment, when the options are displayed in a two-dimensional tiled manner, the options are loaded in the style of a two-dimensional list. In response to a click event of the drop-down selector, a selection box is loaded below the drop-down selector, and the options are loaded and displayed in the style of a two-dimensional list.

[0062] Add a click event listener to each drop-down selector. When the user clicks, in response to the click event of the drop-down selector, call the corresponding function or method to process the display of the two-dimensional list. Load a selection box component in an extended manner below the drop-down selector, and display the words "Please select" in the selection box. Alternatively, you can also not load the selection box component and directly display the words "Please select" in the drop-down selector. Below the selection box, load the selection items in the style of a two-dimensional list, and arrange and display them according to the preset number of rows and columns.

[0063] When a select box component is loaded below a drop-down selector and the options are tiled horizontally on the page, more horizontal space is utilized and more options can be tiled compared to when the options are tiled horizontally on one side of the drop-down selector.

[0064] At the same time, the closing mechanism of the drop-down selector also needs to be considered. For example, when the user clicks the area outside the drop-down selector, the option display of the drop-down selector can be automatically closed and the selection box component that extends the drop-down selector can be automatically hidden.

[0065] Therefore, the present invention provides an effective interface layout strategy, which can dynamically adjust the display method according to the number of options. When the number of options is small, a drop-down list is used for display, and the user can quickly find the required option by scrolling, thereby reducing the complexity of the user's operation; when the number of options is large, a two-dimensional tiled display is used, which can effectively avoid an excessively long scrolling list, so that the user can see more options on the page more intuitively, which is convenient for quick positioning and selection.

[0066] In this embodiment, in step S4, a selection box is loaded below the drop-down selector, and selection items are loaded and displayed in the style of a two-dimensional list, including:

[0067] Get the horizontal width of the form area where the drop-down selector is located, the first distance between the selection box and the bottom of the display interface, and the width and height of a single selection item in the two-dimensional list;

[0068] Divide the horizontal width by the width, and round down the obtained value to get the first placement number in the horizontal direction of the two-dimensional list;

[0069] Divide the first distance by the height, and round down the obtained value to get the second placement number in the vertical direction of the two-dimensional list;

[0070] Multiply the first placement number and the second placement number to obtain the number of placements for the first option;

[0071] Compare the number of first option places that can be placed with the number of options;

[0072] If the number of first options that can be placed is greater than or equal to the number of options, the horizontal width is used as the boundary and the items are displayed vertically in a tiled manner toward the bottom of the display interface.

[0073] Specifically, the horizontal width of the form area where the drop-down selector is located is obtained as form_width, the first distance between the selection box and the bottom of the display interface is margin_bottom, and the width of a single selection item is selection_width and the height is selection_height.

[0074] Divide the horizontal width form_width by the width of the selection item selection_width, and round down the obtained value to get the first placement number x_n1 in the horizontal direction of the two-dimensional list. Divide the first distance margin_bottom by the height of the selection item selection_height, and round down the obtained value to get the second placement number y_n in the vertical direction of the two-dimensional list.

[0075] Multiply the first placement number x_n1 by the second placement number y_n, and the number of placements for the first option is max_n1.

[0076] Compare the number of first options that can be placed, max_n1, with the number of selection items, selection_num. If max_n1 is greater than or equal to selection_num, it means that the number of cells in the current two-dimensional list can normally place the selection items. The selection items are displayed vertically tiled toward the bottom of the display interface with the horizontal width of the form as the boundary, such as Figure 4 This can fully utilize the vertical space of the display interface while avoiding excessive horizontal space occupation, making the interface layout more compact and efficient.

[0077] In this embodiment, in step S4, if the number of first options that can be placed max_n1 is less than the number of selection items selection_num, a selection box is loaded below the drop-down selector, and the selection items are loaded and displayed in the style of a two-dimensional list, and further includes:

[0078] Obtaining a second distance between the selection button and the side edge of the display interface, or taking the horizontal distance of the display interface as the second distance;

[0079] Divide the second distance by the width, and round down the obtained value to get the third placement number in the horizontal direction of the two-dimensional list;

[0080] Multiply the second placement number and the third placement number to get the number of placements for the second option;

[0081] Compare the number of possible second options with the number of options;

[0082] If the number of second options that can be placed is greater than or equal to the number of selection items, the height of the selection button from the bottom of the display interface is used as the boundary and the buttons are horizontally tiled to the side of the display interface.

[0083] Specifically, the maximum distance between the border line of the component frame of the selection button and the side of the display interface is calculated as the second distance, so as to maximize the use of the space below the drop-down selector for horizontal display. For example, the distance from the left border line of the selection button to the right side of the display interface and the distance from the right border line of the selection button to the left side of the display interface are calculated, and the largest distance between the two is taken as the second distance margin_right.

[0084] If the border of the selection button is not used as the boundary line for tiling and unfolding, the second distance may also be the horizontal width of the entire display interface, so that the horizontal space of the display interface can be used to the maximum extent to display the selection items.

[0085] Divide the second distance margin_right by the width of the selection item selection_width, round down the obtained value, and obtain the third placement number x_n2 in the horizontal direction of the two-dimensional list.

[0086] Multiply the third placement number x_n2 by the second placement number y_n, and the number of placements for the second option is max_n2.

[0087] The number of second options that can be placed is max_n2, which is compared with the number of selection items selection_num. If max_n2 is greater than or equal to selection_num, it means that the number of cells in the current two-dimensional list can normally place the selection items. The height of the selection button from the bottom of the display interface is used as the boundary, and the selection button is horizontally tiled to the side of the display interface. For example, Figure 5 As shown. In this way, when the vertical space is limited, the horizontal tile display can more effectively utilize the horizontal space of the display interface and display more options.

[0088] In this embodiment, in step S4, if the number of second options that can be placed is max_n2, which is less than the number of selection items selection_num, a selection box is loaded below the drop-down selector, and the selection items are loaded and displayed in the style of a two-dimensional list, and further includes:

[0089] Divide the number of options by the number of second options that can be placed, and round up the resulting value to get the number of display pages for the options;

[0090] Create a page number variable, the value of which is set to 1 by default, and load the previous page button and the next page button outside the border of the two-dimensional list;

[0091] In response to a click event of the next page button, the page number variable is incremented by 1, and in response to a click event of the previous page button, the page number variable is decremented by 1;

[0092] When the page number variable is equal to 1, cancel the click event of the previous page button and set the previous page button to the inactive state;

[0093] When the page number variable is equal to the number of displayed pages, cancel the click event of the next page button and set the next page button to the inactive state;

[0094] When the page number variable is greater than 1 and less than the page number variable, both the previous page button and the next page button can respond to the click event and be set to the active state.

[0095] Specifically, the maximum number of items that can be placed in the second option, max_n2, represents how many selection items can be presented in the two-dimensional list on the current page. Divide the number of selection items, selection_num, by the maximum number of items that can be placed in the second option, max_n2, to obtain the number of pages for displaying the selection items, page_count.

[0096] Create a page number variable, current_page_no, and the value of the page number variable current_page_no is default set to 1, that is, the dropdown selector default displays the selection items on the first page. As Figure 6 shown, add a previous page button and a next page button outside the border of the two-dimensional list, and add a click event listener. After clicking the button, the selection items can be paged. When the user clicks the previous page button, in response to the click event of the next page button, the page number variable is incremented by 1. When the user clicks the next page button, in response to the click event of the next page button, the page number variable is decremented by 1.

[0097] When the page number variable current_page_no is equal to 1, it means that the current page being displayed is the first page. The previous page button needs to be set to the inactive state. The button color can be set to a non-highlight color, such as graying out the button color to make it a disabled button to inform the user that they cannot continue to page, and cancel the click event so that it cannot respond to the user's click event.

[0098] When the page number variable current_page_no is equal to the number of displayed pages, page_count, it means that the current page being displayed is the last page. The next page button needs to be set to the inactive state. The button color can be set to a non-highlight color, such as graying out the button color to make it a disabled button to inform the user that they cannot continue to page, and cancel the click event so that it cannot respond to the user's click event.

[0099] When 1 < current_page_no < page_count, it means that there are selection items on both the previous page and the next page of the current page. Both the previous page button and the next page button are in the active state. The button color can be set to a highlight color, and the button click event is enabled to respond to the user's click event.

[0100] Therefore, in order to more conveniently browse a large number of options, the previous page button and the next page button are added outside the border of the two-dimensional list, and the appearance settings of the original two-dimensional list are retained. After clicking the button, the options can be quickly flipped through the pages, which improves the convenience of operation. And the interactive mode of the page-turning button is suitable for a variety of devices, such as desktop computers, tablets, and mobile phones. No matter what device the user uses, he can easily flip through the pages to find the options by clicking the button, which is convenient for the user to operate.

[0101] In this embodiment, the two-dimensional list is set as a draggable component, and the two-dimensional list responds to the drag and slide event of the mouse, triggering the two-dimensional list to move on the page in a suspended form.

[0102] Specifically, JavaScript can be used to implement the dragging function, add mouse events (such as mousedown, mousemove, and mouseup) to the two-dimensional list, monitor mouse events, and record the mouse start position and the initial position of the two-dimensional list when the user presses the mouse button (responding to the mousedown event of the mouse), and add the dragging class to apply the dragging style. When the mouse is dragged (responding to the mousemove event of the mouse), the position of the two-dimensional list is updated. When the user releases the mouse button (responding to the mouseup event of the mouse), the dragging ends and the dragging class is removed. In this way, the two-dimensional list can respond to the mouse drag and slide events and move on the page in a suspended form. You can also add dragging styles, such as reducing transparency, to improve the visibility of obscured elements on the page during the dragging process.

[0103] In this embodiment, the method further includes:

[0104] According to historical data, count the number of times each option is selected by users to serve as the priority value of the option;

[0105] Adjust the display order of the options in the drop-down selector based on the priority values.

[0106] Specifically, an event is triggered when an option is selected, and the selection result is sent to the database for storage. The stored data should include the identification of the option (such as ID) and the number of times it has been selected, so as to collect historical data of user selections. The priority value of an option can be a simple number of selections, or a value processed by weighting or other algorithms. Every time a user visits a page, for the options in the drop-down selector, the priority value of the option is retrieved from the database, the options are sorted according to the priority value, and the sorted results are applied to the drop-down selector, so that the frequently selected options are displayed in front, realizing the function of dynamically adjusting the order of options according to the user's selection habits, further improving the selection efficiency.

[0107] On the basis of the above embodiments, when the option is in the selected state, the selected option is displayed in a highlighted or bold font manner, so that the selected option is more prominent and convenient for users to view.

[0108] In summary, an embodiment of the present invention provides a method for expanding options of a drop-down selector, by obtaining the number of options of the drop-down selector; comparing the number of options with a preset display threshold; if the number of options is less than or equal to the display threshold, displaying the options in a drop-down list; if the number of options is greater than the display threshold, displaying the options in a two-dimensional tiled manner. The present invention can dynamically adjust the display method according to the number of options. When the number of options is small, a drop-down list is used for display, and the user can quickly find the required options by scrolling, reducing the complexity of the user's operation; when the number of options is large, a two-dimensional tiled method is used for display, which can effectively avoid an excessively long scrolling list, allowing the user to more intuitively see more options on the page, facilitating quick positioning and selection. Therefore, the display threshold is flexibly adjusted according to actual needs to adapt to the needs of different scenarios, thereby improving the user experience and selection operation efficiency, and facilitating users to find target options.

[0109] Those skilled in the art will appreciate that, in the above method of specific implementation, the order in which the steps are written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of the steps should be determined by their functions and possible internal logic.

[0110] In addition, some embodiments of the present application also provide an electronic device. The electronic device may be a digital computer in various forms, such as a laptop computer, a desktop computer, a workbench, a personal digital assistant, a server, a blade server, a mainframe computer, etc. The electronic device may also be a mobile device in various forms, such as a personal digital processing, a cellular phone, a smart phone, a wearable device, and other similar computing devices.

[0111] The electronic device comprises: one or more processors; and a memory storing computer program instructions, wherein when the computer program instructions are executed, the processor executes the steps of the drop-down selector selection item expansion method provided in any one or more of the above embodiments. Figure 7 An exemplary structural diagram of the electronic device is disclosed. Figure 7As shown, the electronic device includes: one or more processors 1101, memory 1102, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. The various components are connected to each other using different buses and can be installed on a common mainboard or installed in other ways as needed. The processor can process instructions executed in the electronic device, including instructions stored in or on the memory to display graphical information of the GUI on an external input / output device (such as a display device coupled to the interface). In some other embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple electronic devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Among them, the components shown in this article, their connections and relationships, and their functions are only used as examples, and are not intended to limit the implementation of the present application described and / or required herein.

[0112] The electronic device may further include: an input device 1103 and an output device 1104. The processor 1101, the memory 1102, the input device 1103 and the output device 1104 may be connected via a bus or other means. Figure 7 The example of connecting through bus is taken in the following.

[0113] The input device 1103 can receive input digital or character information, and generate key signal input related to the user settings and function control of the electronic device, such as a touch screen, a keypad, a mouse, a track pad, a touch pad, an indicator bar, one or more mouse buttons, a trackball, a joystick and other input devices. The output device 1104 may include a display device, an auxiliary lighting device (e.g., an LED) and a tactile feedback device (e.g., a vibration motor), etc. The display device may include, but is not limited to, a liquid crystal display (LCD), a light emitting diode (LED) display and a plasma display. In some embodiments, the display device may be a touch screen.

[0114] To provide interaction with a user, the electronic device may be a computer. The computer has: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or a trackball), through which the user can provide input to the computer. Other types of devices may also be used to provide interaction with the user; for example, the feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form (including acoustic input, voice input, or tactile input).

[0115] In an embodiment of the present application, a computer program / instruction is stored on a computer-readable medium, and when the computer program / instruction is executed by a processor, the steps of the method for expanding the drop-down selector selection items provided in any one or more of the above embodiments are implemented. The computer-readable medium may be included in the electronic device described in the above embodiments; or it may exist independently without being assembled into the device. The above computer-readable medium carries one or more computer-readable instructions.

[0116] The memory 1102 can be used as a non-transient computer-readable storage medium, which can be used to store non-transient software programs, non-transient computer executable programs and modules. The processor 1101 executes various functional applications and data processing of the server by running the non-transient software programs, instructions and modules stored in the memory 1102, so as to implement the program instructions / modules corresponding to the method provided by any one or more embodiments in the embodiments of the present application.

[0117] The memory 1102 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 1102 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory 1102 may optionally include a memory remotely arranged relative to the processor 1101, and these remote memories may be connected to the electronic device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0118] It should be noted that more specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present application, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0119] Computer readable storage media include permanent and non-permanent, removable and non-removable media, and can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, modules of programs or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission medium that can be used to store information that can be accessed by a computing device.

[0120] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0121] In the above-described embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. For example, it can be implemented by using an application specific integrated circuit (ASIC), a general-purpose computer or any other similar hardware device. In certain embodiments, the software program of the present application can be executed by a processor to implement the above steps or functions. Similarly, the software program of the present application (including relevant data structures) can be stored in a computer-readable recording medium, for example, a RAM memory, a magnetic or optical drive or a floppy disk and similar devices. In addition, some steps or functions of the present application can be implemented by hardware, for example, as a circuit that cooperates with a processor to perform each step or function.

[0122] The computer program product provided in the embodiment of the present application includes one or more computer programs / instructions, and when the computer program / instructions are executed by the processor, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium, or transmitted from a computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, a computer, a server or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium may be any available medium that a computer can access or a data storage device such as a server or a data center that includes one or more available media integrations. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid state disk (SSD)), etc.

[0123] The flow chart or block diagram in the accompanying drawings shows the possible architecture, function and operation of the equipment, method and computer program product according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart can be implemented with a dedicated system for hardware that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0124] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily mention changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims, and the above embodiments should be regarded as exemplary and non-restrictive.

Claims

1. A method for expanding options of a drop-down selector, characterized in that: include: Get the number of selected items in the drop-down selector; Comparing the number of selection items with a preset display threshold; If the number of options is less than or equal to the display threshold, the options are displayed in a drop-down list; If the number of options is greater than the display threshold, the options are displayed in a two-dimensional tiling manner.

2. The method for expanding options of a drop-down selector according to claim 1, characterized in that: When the options are displayed in a two-dimensional tiled manner, the options are loaded in the style of a two-dimensional list. In response to a click event of the drop-down selector, a selection box is loaded below the drop-down selector, and the options are loaded and displayed in the style of a two-dimensional list.

3. The method for expanding options of a drop-down selector according to claim 2, characterized in that: The step of loading a selection box below the drop-down selector and loading and displaying the selection items in a two-dimensional list style includes: Obtain the horizontal width of the form area where the drop-down selector is located, the first distance between the selection box and the bottom of the display interface, and the width and height of a single selection item in the two-dimensional list; Divide the horizontal width by the width, and round down the obtained value to obtain the first placement number in the horizontal direction of the two-dimensional list; Divide the first distance by the height, and round down the obtained value to obtain a second placement number in the vertical direction of the two-dimensional list; Multiplying the first placement number and the second placement number to obtain the number of first option placements; Compare the number of the first options that can be placed with the number of options; If the number of the first options that can be placed is greater than or equal to the number of options, the horizontal width is used as a boundary and the items are displayed vertically tiled toward the bottom of the display interface.

4. The method for expanding options of a drop-down selector according to claim 3, characterized in that: If the number of the first options that can be placed is less than the number of the options, the step of loading a selection box below the drop-down selector and loading and displaying the options in a two-dimensional list style also includes: Acquire a second distance between the selection button and the side of the display interface, or take the horizontal distance of the display interface as the second distance; Divide the second distance by the width, and round down the obtained value to obtain a third placement number in the horizontal direction of the two-dimensional list; Multiplying the second placement number by the third placement number to obtain the placement number of the second option; Compare the number of the second options that can be placed with the number of options; If the number of second options that can be placed is greater than or equal to the number of selection items, the height of the selection button from the bottom of the display interface is used as a boundary to horizontally tile the display interface to the side of the display interface.

5. The method for expanding options of a drop-down selector according to claim 4, characterized in that: If the number of the second options that can be placed is less than the number of the selection items, the step of loading a selection box below the drop-down selector and loading and displaying the selection items in a two-dimensional list style also includes: Divide the number of options by the number of second options that can be placed, and round up the resulting value to obtain the number of display pages for the options; A page number variable is established, the value of which is set to 1 by default, and a previous page button and a next page button are loaded outside the border of the two-dimensional list; In response to a click event of the next page button, the page number variable is incremented by 1, and in response to a click event of the previous page button, the page number variable is decremented by 1; When the page number variable is equal to 1, cancel the click event of the previous page button and set the previous page button to an inactive state; When the page number variable is equal to the number of displayed pages, cancel the click event of the next page button and set the next page button to an inactive state; When the page number variable is greater than 1 and less than the page number variable, both the previous page button and the next page button may respond to a click event and be set to an activated state.

6. The method for expanding options of a drop-down selector according to claim 2, characterized in that: The two-dimensional list is set as a draggable component, and the two-dimensional list responds to a drag and slide event of a mouse, triggering the two-dimensional list to move on the page in a suspended form.

7. The method for expanding options of a drop-down selector according to claim 1, characterized in that: Also includes: According to the historical data, the number of times each of the options is selected by the user is counted as the priority value of the option; The display order of the selection items in the drop-down selector is adjusted according to the priority values.

8. An electronic device, characterized in that: The electronic device comprises: One or more processors; and a memory storing computer program instructions, wherein when the computer program instructions are executed, the processor executes the steps of the method for expanding the selection items of the drop-down selector according to any one of claims 1 to 7.

9. A computer-readable storage medium having a computer program / instruction stored thereon, characterized in that: When the computer program / instructions are executed by a processor, the steps of the method for expanding selection items of a drop-down selector as described in any one of claims 1 to 7 are implemented.

10. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instruction is executed by a processor, the steps of the method for expanding selection items of a drop-down selector as described in any one of claims 1 to 7 are implemented.

Images