Pull-down selection method and device based on pull-down component and electronic equipment
By encapsulating the drop-down component and configuring hierarchical objects, listening to user events, and rendering multi-level DOM templates, the multi-level selection of the dropdown.js component is implemented, which solves the problem of single-selection limitations and expands the selection method.
Patent Information
- Application Number
- CN202510572549.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-06
- Publication Date
- 2025-09-19
AI Technical Summary
The existing dropdown.js component can only realize single selection when dropping down, which is limited in usage and lacks the functions of multiple selection and multi-level selection.
Through the concepts of constructor and prototype simulation class, the drop-down component is encapsulated, component parameters are configured, including hierarchical objects, user events are listened, multi-level DOM templates are rendered, multi-level selection is achieved, and single selection, multiple selection and multi-level selection are supported.
The drop-down value selection method has been expanded to realize single selection, multiple selection and multi-level selection, which solves the limitations of the use of drop-down components and expands the application scenarios of drop-down components.
Smart Images
Figure CN120669884A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of computer software technology, and in particular to a drop-down selection method, device, and electronic device based on a drop-down component. Background Art
[0002] Currently, the dropdown.js component is a frequently used drop-down component in page form services. This component can only implement single selection in the drop-down selection, and its usage is limited.
[0003] With respect to the problem in the related art that the drop-down component has limited usage when performing a drop-down selection, no effective technical solution has been proposed yet. Summary of the Invention
[0004] The main purpose of the present disclosure is to provide a drop-down selection method, device and electronic device based on a drop-down component, so as to solve the problem of limited usage of the drop-down component during drop-down selection in the related art.
[0005] In order to achieve the above-mentioned object, a first aspect of the present disclosure provides a drop-down selection method based on a drop-down component, comprising:
[0006] Initialize the drop-down component, configure the component parameters of the drop-down component, and echo the attribute values of each component parameter, wherein the component parameters include hierarchical objects;
[0007] Initialize the rendering DOM template, determine the rendering method according to the attribute value of the hierarchical object, and render the DOM template using the rendering method;
[0008] After the DOM template rendering is completed, listen for user events;
[0009] In response to a user click event on the drop-down component, the drop-down data interface is called to render the drop-down list;
[0010] Expand the drop-down list, display the drop-down value selected by the user from the drop-down list, and hide the drop-down list after displaying the drop-down value.
[0011] Optionally, the rendering mode is rendering a single-layer template or rendering a spliced template;
[0012] The determining of the rendering mode according to the attribute value of the hierarchical object and rendering the DOM template using the rendering mode includes:
[0013] When the hierarchical object is a single-level object, a single-layer template is rendered, and the tab item is directly used to render the DOM template;
[0014] When the hierarchical object is multi-level, the splicing template is rendered, and the tab items of each level are spliced in a loop to achieve the rendering of the DOM template.
[0015] Optionally, monitoring user events includes:
[0016] Listen for click events and focus loss events triggered by the user.
[0017] Optionally, after rendering the drop-down list, the method further includes:
[0018] When the hierarchical object is multi-level and there are multi-level data in the drop-down list, a multi-level tab item click event is initialized to cache the multi-level data layer by layer;
[0019] Each time the user clicks a level, the current level tab item is processed and the current level, the current level data, and the current level's unique identity are bound;
[0020] The multi-level data is re-rendered, and each time the user clicks on a level, the data is rendered level by level starting from the first level of data until the last level of data is rendered.
[0021] Optionally, after displaying the drop-down value selected by the user from the drop-down list, the method further includes:
[0022] When the wrong drop-down value is selected and the component parameters are configured to clear the text box, reset the selected value and clear the text box to reselect the drop-down value.
[0023] A second aspect of the present disclosure provides a drop-down selection device based on a drop-down component, comprising:
[0024] an initialization unit, configured to initialize the drop-down component, configure component parameters of the drop-down component, and echo attribute values of each component parameter, wherein the component parameters include hierarchical objects;
[0025] A rendering unit, configured to initialize a rendering DOM template, determine a rendering method according to the attribute value of the hierarchical object, and render the DOM template using the rendering method;
[0026] The monitoring unit is used to monitor user events after the DOM template rendering is completed;
[0027] A response unit, configured to respond to a user's click event on the drop-down component, call a drop-down data interface, and render a drop-down list;
[0028] The display unit is used to expand the drop-down list, echo the drop-down value selected by the user from the drop-down list, and hide the drop-down list after displaying the drop-down value.
[0029] Optionally, the device further comprises:
[0030] A cache unit, configured to, when the hierarchical object is multi-level and there is multi-level data in the drop-down list, initialize a multi-level tab item click event and cache the multi-level data layer by layer;
[0031] The binding unit is used to process the current level tab item each time the user clicks on a level, and bind the current level, the current level data, and the current level's unique identity;
[0032] The re-rendering unit is used to re-render the multi-level data. Each time the user clicks on a level, the data is rendered layer by layer starting from the first level of data until the last level of data is rendered.
[0033] Optionally, the device further comprises:
[0034] Clear unit, used to reset the selected value and clear the text box when the wrong drop-down value is selected and the component parameters are configured to clear the text box, so that the drop-down value can be reselected again.
[0035] A third aspect of the present disclosure provides a computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable a computer to execute the drop-down selection method based on the drop-down component provided in any one of the first aspects.
[0036] The fourth aspect of the present disclosure provides an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to execute the drop-down selection method based on the drop-down component provided in any one of the first aspects.
[0037] In the drop-down selection method based on the drop-down component provided in the embodiment of the present disclosure, the drop-down component is initialized, the component parameters of the drop-down component are configured, and the attribute values of each component parameter are echoed, wherein the component parameters include a hierarchical object; the DOM template is initialized for rendering, a rendering mode is determined according to the attribute values of the hierarchical object, and the DOM template is rendered using the rendering mode; the rendering mode of the DOM template is determined according to the attribute values of the hierarchical object, so that the rendering of the DOM template in different hierarchical situations can be realized;
[0038] After the DOM template is rendered, the system listens for user events; responds to a user click on the drop-down component, calls the drop-down data interface, and renders a drop-down list; expands the drop-down list, and then displays the drop-down value selected by the user. After displaying the drop-down value, the drop-down list is hidden. By selecting a drop-down value from the rendered drop-down list and displaying it, the system expands the drop-down value selection method, enabling a variety of different selection scenarios, such as single selection, multiple selection, and multi-level selection, solving the problem of the limited usage of drop-down components in drop-down selection in related technologies. BRIEF DESCRIPTION OF THE DRAWINGS
[0039] In order to more clearly illustrate the specific embodiments of the present disclosure or the technical solutions in the related technologies, the following briefly introduces the drawings required for use in the specific embodiments or related technical descriptions. Obviously, the drawings described below are only some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.
[0040] Figure 1 A schematic flow chart of a drop-down selection method based on a drop-down component provided in an embodiment of the present disclosure;
[0041] Figure 2 A block diagram of a drop-down selection device based on a drop-down component provided in an embodiment of the present disclosure;
[0042] Figure 3 A block diagram of an electronic device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION
[0043] In order to enable those skilled in the art to better understand the solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the embodiments described are only part of the embodiments of the present disclosure, not all of the embodiments. Based on the embodiments of the present disclosure, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present disclosure.
[0044] It should be noted that the terms "including" and "having" and any variations thereof in the specification and claims of the present disclosure and the above-mentioned drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or apparatus that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or are inherent to these processes, methods, products or apparatuses.
[0045] It should be noted that, in the absence of conflict, the embodiments and features of the embodiments in the present disclosure may be combined with each other. The present disclosure will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.
[0046] Currently, the dropdown.js component is a frequently used drop-down component in web form applications. However, this component only supports single selection, limiting its usability. Currently, no effective technical solution has been proposed to address this limitation in the drop-down component's functionality.
[0047] In order to solve the above problems, the embodiment of the present disclosure provides a drop-down selection method based on a drop-down component, which combines the idea of object-oriented development in JavaScript, simulates the concept of class through constructor and prototype, encapsulates internal execution functions, and encapsulates and transforms the drop-down component based on jQuery plug-in, such as Figure 1 As shown, the method includes the following steps S11 to S15:
[0048] Step S11: Initialize the drop-down component, configure the component parameters of the drop-down component, and echo the attribute values of each component parameter, wherein the component parameters include hierarchical objects; the drop-down component can be a dropdown.js component. When echoing, the default attribute values of each component parameter can be displayed by field linkage assignment, and the echo value and the placeholder text of the field prompt can be mounted; introduce the drop-down component in the html page, configure the component parameters, initialize the drop-down component in the corresponding js file, obtain the initialization data source in the global object, pass it into the drop-down component, capture the selected value and store it.
[0049] In addition to the hierarchical objects, component parameters can also include selected values, multi-level data requests, default selected items, levels that allow direct selection, whether the drop-down component is clickable, keys, and whether the text box can be cleared. Detailed descriptions of each item in the component parameters are as follows:
[0050] data-dropdown{function}, selected value, callback after selection, the selected result is passed by default, if there are multiple levels, the value object of each level is returned;
[0051] data-tabs{string}, hierarchical object, multiple levels are separated by “|”, for example: province|city|district;
[0052] data-trigger{function}, a multi-level data request function, which triggers the request for sub-level data after selecting the upper-level data;
[0053] data-selected{object key}, the default selected item;
[0054] data-level{int}, allows direct selection of the level;
[0055] data-disabled{number or boolean}, whether the drop-down component is clickable, the attribute value is 0, 1 or false, true, 0 or false means clickable, 1 or true means not clickable;
[0056] data-key{string}, generally the key corresponding to the value that needs to be passed to the backend after the drop-down component on the page is selected, and also corresponds to the dictionary table;
[0057] data-clearable{boolean}, whether the text box can be cleared, false means the text box cannot be cleared, true means the text box can be cleared.
[0058] Step S12: Initialize the rendering of the DOM template, determine the rendering mode according to the attribute value of the hierarchical object, and render the DOM template using the rendering mode; the DOM template can also be called the HTML template, which is written in the HTML file. Once the HTML file is opened, it will be parsed and rendered by the browser, following the HTML structure and tag naming to facilitate browser parsing;
[0059] By default, the hierarchical object is a single-level radio drop-down. When the attribute value corresponding to the directly selected level is passed in as 3, and the display format of the hierarchical object data-tabs selection is set to "province|city|district", the radio drop-down component can be made into a drop-down component with both single-selection and multi-level selection. For different hierarchical situations, the way to render the DOM template is determined according to the attribute value of the hierarchical object, which can realize the rendering of the DOM template in different hierarchical situations.
[0060] In an optional embodiment of the present disclosure, the rendering mode is rendering a single-layer template or rendering a spliced template;
[0061] The step S12 determines the rendering mode according to the attribute value of the hierarchical object, and renders the DOM template using the rendering mode, including:
[0062] When the hierarchical object is single-level, a single-layer template is rendered. The tab item is used directly to render the DOM template. The tab item is a tab tab, which refers to a container for switching tabs and is widely used in web pages.
[0063] When the hierarchical object is multi-level, render the splicing template, loop the splicing of the tab items at each level, and implement the rendering of the DOM template.
[0064] For different hierarchical situations, the method of rendering the DOM template is determined according to the attribute value of the hierarchical object. When there is a single level, a single layer template is rendered, and when there are multiple levels, a spliced template is rendered. This can realize the rendering of DOM templates in different hierarchical situations.
[0065] Step S13: After the DOM template rendering is completed, monitor user events; after the DOM template rendering is completed, a listener can be added to monitor events triggered by the user.
[0066] In an optional implementation of the present disclosure, monitoring user events in step S13 includes:
[0067] Listen for click events and focus loss events triggered by the user. Click events include one or more of the following: click events on drop-down components, click events on single-level tab items, and click events on multi-level tab items. Focus loss events are triggered when a page element loses focus.
[0068] Step S14: respond to the user's click event on the drop-down component, call the drop-down data interface, and render the drop-down list; when the user clicks the drop-down, start obtaining the drop-down data and rendering the drop-down list; when the user does not click the drop-down, the default echo value is displayed.
[0069] In an optional implementation of the present disclosure, after rendering the drop-down list in step S14, the method further includes:
[0070] When the hierarchical object is multi-level and there is multi-level data in the drop-down list, initialize the multi-level tab item click event and cache the multi-level data layer by layer; cache the multi-level data layer by layer in the order from the first layer to the last layer, where the structure between the two adjacent layers of data is a parent-child relationship, and the child layer data can be empty. Therefore, the multi-level can be compatible with the single level. At this time, the first layer of the multi-level has data, and the data of other layers is empty;
[0071] Each time the user clicks a level, the current level tab item is processed and the current level, the current level data, and the current level's unique identity are bound;
[0072] Re-render multiple levels of data. Each time the user clicks a level, the data is rendered layer by layer, starting from the first level of data until the last level of data is rendered.
[0073] By caching multi-level data layer by layer and binding each layer with its own data and unique identity, the multi-level data is rendered layer by layer in the order from the first layer to the last layer. This can provide users with multi-level selections and a variety of different drop-down selections, broaden the usage scenarios of the drop-down component, and enable the drop-down component to have the business scenario capabilities of single selection and multi-level selection.
[0074] In addition, when there is no data in the drop-down list, a pop-up window can be used to prompt the user that there is currently no data.
[0075] Step S15: Expand the drop-down list, display the drop-down value selected by the user from the drop-down list, and hide the drop-down list after displaying the drop-down value.
[0076] By selecting the drop-down value from the rendered drop-down list for echoing, the selection method of the drop-down value is expanded to realize selection in various situations such as single selection, multiple selection, and multi-level selection, solving the problem of limited usage of the drop-down component in the drop-down selection in related technologies.
[0077] In an optional implementation of the present disclosure, after the drop-down value selected by the user from the drop-down list is displayed in step S15, the method further includes:
[0078] When the wrong drop-down value is selected and the component parameters are configured to clear the text box, the selected value is reset and the text box is cleared so that the drop-down value can be reselected. The user can clear the text box and reselect the drop-down value. It supports clearing all selected data with one click to re-determine the selected value from the drop-down list.
[0079] From the above description, it can be seen that the present disclosure achieves the following technical effects:
[0080] By caching multi-level data layer by layer and binding each layer with its own data and unique identity, the multi-level data is rendered layer by layer in order from the first layer to the last layer. This can provide users with multi-level selection and a variety of different drop-down options, broadening the use scenarios of the drop-down component and enabling the drop-down component to have business scenarios with single-selection and multi-level selection capabilities;
[0081] By selecting the drop-down value from the rendered drop-down list for echoing, the selection method of the drop-down value is expanded to realize selection in various situations such as single selection, multiple selection, and multi-level selection, solving the problem of limited usage of the drop-down component in the drop-down selection in related technologies.
[0082] It should be noted that the steps shown in the flowcharts of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and that, although a logical order is shown in the flowcharts, in some cases, the steps shown or described can be executed in an order different from that shown here.
[0083] The embodiment of the present disclosure also provides a pull-down selection device based on a pull-down component for implementing the above method embodiment, such as Figure 2 As shown, the pull-down selection device 20 includes:
[0084] Initialization unit 21, used to initialize the drop-down component, configure component parameters of the drop-down component, and echo the attribute values of each component parameter, wherein the component parameters include hierarchical objects;
[0085] The rendering unit 22 is used to initialize the rendering DOM template, determine the rendering mode according to the attribute value of the hierarchical object, and render the DOM template using the rendering mode;
[0086] The monitoring unit 23 is used to monitor user events after the DOM template rendering is completed;
[0087] The response unit 24 is used to respond to the user's click event on the drop-down component, call the drop-down data interface, and render the drop-down list;
[0088] The display unit 25 is used to expand the drop-down list, echo the drop-down value selected by the user from the drop-down list, and hide the drop-down list after displaying the drop-down value.
[0089] In an optional embodiment of the present disclosure, the drop-down selection device 20 further includes:
[0090] The cache unit is used to initialize the multi-level tab item click event when the hierarchical object is multi-level and there is multi-level data in the drop-down list, and cache the multi-level data layer by layer;
[0091] The binding unit is used to process the current level tab item each time the user clicks on a level, and bind the current level, the current level data, and the current level's unique identity;
[0092] The re-rendering unit is used to re-render multi-level data. Each time the user clicks on a level, the data is rendered layer by layer, starting from the first level of data until the last level of data is rendered.
[0093] In an optional embodiment of the present disclosure, the drop-down selection device 20 further includes:
[0094] Clear unit, used to reset the selected value and clear the text box when the wrong drop-down value is selected and the component parameters are configured to clear the text box, so that the drop-down value can be reselected again.
[0095] The specific manner in which each unit in the above device embodiment performs operations has been described in detail in the embodiment of the method, and will not be elaborated on here.
[0096] The present disclosure also provides an electronic device, such as Figure 3 As shown, the electronic device includes one or more processors 31 and a memory 32. Figure 3 A processor 31 is taken as an example.
[0097] The controller may further include an input device 33 and an output device 34 .
[0098] The processor 31, memory 32, input device 33 and output device 34 may be connected via a bus or other means. Figure 3 The bus connection is taken as an example.
[0099] The processor 31 can be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or a combination of the above chips. The general-purpose processor can be a microprocessor or any conventional processor.
[0100] Memory 32, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs, non-transitory computer executable programs, and modules, such as the program instructions / modules corresponding to the control method in the embodiments of the present disclosure. Processor 31 executes the non-transitory software programs, instructions, and modules stored in memory 32 to execute various functional applications and data processing of the server, thereby implementing the drop-down selection method based on the drop-down component in the above-mentioned method embodiment.
[0101] The memory 32 may include a program storage area and a data storage area, wherein the program storage area may store an operating system and application programs required for at least one function; the data storage area may store data created based on the use of the processing device operated by the server, etc. In addition, the memory 32 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device. In some embodiments, the memory 32 may optionally include a memory remotely located relative to the processor 31, and these remote memories may be connected to a network connection 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.
[0102] The input device 33 can receive input digital or character information and generate key signal input related to user settings and function control of the processing device of the server. The output device 34 can include a display device such as a display screen.
[0103] One or more modules are stored in the memory 32 and when executed by one or more processors 31, perform the following operations: Figure 1 The method shown.
[0104] Those skilled in the art will appreciate that all or part of the processes in the above method embodiments can be implemented by instructing related hardware through a computer program. The program can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes in the above method embodiments. The storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), a random access memory (RAM), a flash memory (FM), a hard disk drive (HDD), or a solid-state drive (SSD). The storage medium can also include a combination of the above types of memory.
[0105] Although the embodiments of the present disclosure have been described with reference to the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present disclosure, and such modifications and variations are all within the scope defined by the appended claims.
Claims
1. A drop-down selection method based on a drop-down component, characterized in that: include: Initialize the drop-down component, configure the component parameters of the drop-down component, and echo the attribute values of each component parameter, wherein the component parameters include hierarchical objects; Initialize the rendering DOM template, determine the rendering method according to the attribute value of the hierarchical object, and render the DOM template using the rendering method; After the DOM template rendering is completed, listen for user events; In response to a user click event on the drop-down component, the drop-down data interface is called to render the drop-down list; Expand the drop-down list, display the drop-down value selected by the user from the drop-down list, and hide the drop-down list after displaying the drop-down value.
2. The method according to claim 1, characterized in that The rendering mode is rendering a single-layer template or rendering a spliced template; The determining of the rendering mode according to the attribute value of the hierarchical object and rendering the DOM template using the rendering mode includes: When the hierarchical object is a single-level object, a single-layer template is rendered, and the tab item is directly used to render the DOM template; When the hierarchical object is multi-level, the splicing template is rendered, and the tab items of each level are spliced in a loop to achieve the rendering of the DOM template.
3. The method according to claim 1, characterized in that The monitoring of user events includes: Listen for click events and focus loss events triggered by the user.
4. The method according to claim 1, wherein After rendering the drop-down list, the method further includes: When the hierarchical object is multi-level and there are multi-level data in the drop-down list, a multi-level tab item click event is initialized to cache the multi-level data layer by layer; Each time the user clicks a level, the current level tab item is processed and the current level, the current level data, and the current level's unique identity are bound; The multi-level data is re-rendered, and each time the user clicks on a level, the data is rendered level by level starting from the first level of data until the last level of data is rendered.
5. The method according to claim 1, wherein After displaying the drop-down value selected by the user from the drop-down list, the method further includes: When the wrong drop-down value is selected and the component parameters are configured to clear the text box, reset the selected value and clear the text box to reselect the drop-down value.
6. A drop-down selection device based on a drop-down component, characterized in that: include: an initialization unit, configured to initialize the drop-down component, configure component parameters of the drop-down component, and echo attribute values of each component parameter, wherein the component parameters include hierarchical objects; A rendering unit, configured to initialize a rendering DOM template, determine a rendering method according to the attribute value of the hierarchical object, and render the DOM template using the rendering method; The monitoring unit is used to monitor user events after the DOM template rendering is completed; A response unit, configured to respond to a user's click event on the drop-down component, call a drop-down data interface, and render a drop-down list; The display unit is used to expand the drop-down list, echo the drop-down value selected by the user from the drop-down list, and hide the drop-down list after displaying the drop-down value.
7. The device according to claim 6, characterized in that The device further comprises: A cache unit, configured to, when the hierarchical object is multi-level and there is multi-level data in the drop-down list, initialize a multi-level tab item click event and cache the multi-level data layer by layer; The binding unit is used to process the current level tab item each time the user clicks on a level, and bind the current level, the current level data, and the current level's unique identity; The re-rendering unit is used to re-render the multi-level data. Each time the user clicks on a level, the data is rendered layer by layer starting from the first level of data until the last level of data is rendered.
8. The device according to claim 6, characterized in that The device further comprises: Clear unit, used to reset the selected value and clear the text box when the wrong drop-down value is selected and the component parameters are configured to clear the text box, so that the drop-down value can be reselected again.
9. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the drop-down selection method based on the drop-down component according to any one of claims 1 to 5.
10. An electronic device, characterized in that: The electronic device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor executes the drop-down selection method based on the drop-down component as described in any one of claims 1 to 5.