WO2020253059A1

WO2020253059A1 - Method and apparatus for implementing multi-stage linkage drop-down box, and computer device

Info

Publication number: WO2020253059A1
Application number: PCT/CN2019/118176
Authority: WO
Inventors: 陈旭敏
Original assignee: 平安科技（深圳）有限公司
Priority date: 2019-06-18
Filing date: 2019-11-13
Publication date: 2020-12-24
Also published as: CN110377851B; CN110377851A

Abstract

A method for implementing a multi-stage linkage drop-down box. The method comprises: acquiring page data, wherein the page data comprises a plurality of drop-down box elements and attribute information corresponding to each drop-down box element; acquiring a drop-down box component corresponding to a drop-down box element, and respectively generating an instance of each drop-down box element; configuring the instance of each drop-down box element according to the attribute information of each drop-down box element, and rendering the instance of each drop-down box element after the configuration is completed so as to obtain a plurality of visual drop-down boxes; acquiring an option data set corresponding to the current drop-down box and generating a drop-down list; detecting a drop-down box change event in the current drop-down box, and determining target option data according to the detected drop-down box change event; and acquiring an option data set of a next-level drop-down box according to the target option data, and generating a drop-down list of the next-level drop-down box according to the acquired option data set.

Description

Method, device and computer equipment for implementing multi-level linkage drop-down box

Cross references to related applications

This application claims the priority of a Chinese patent application filed with the Chinese Patent Office on June 18, 2019, the application number is 2019105253184, and the application name is "Methods, devices and computer equipment for implementing multi-level linkage drop-down boxes", all of which are approved The reference is incorporated in this application.

Technical field

This application relates to a method, device, computer equipment, and storage medium for implementing a multi-level linkage drop-down box.

Background technique

With the development of the Internet, corporate marketing activities have shifted from offline to online, and the Internet and social circles are used to achieve the goals of loan product marketing, customer service, and customer acquisition.

When customers participate in activities through online marketing activities pages, they often need to fill in some personal information. In order to facilitate customers to fill in and improve customer experience, they usually try to minimize the text filled in by customers, and usually load cascading plug-ins in the page. , In order to realize the multi-level linkage drop-down selection box, the user only needs to select from the drop-down box. In traditional technology, cascading plug-ins are mostly implemented to solve a certain problem, and different plug-ins need to be used in different scenarios. However, the inventor realized that this method will cause the code to become very redundant and affect the computer's performance. performance.

Summary of the invention

According to various embodiments disclosed in the present application, a method, device, computer device, and storage medium for implementing a multi-level linkage drop-down box are provided.

A method for implementing multi-level linkage drop-down boxes includes:

Acquiring page data, where the page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element;

Obtain the drop-down box component corresponding to the drop-down box element, and respectively generate instances of each drop-down box element;

According to the attribute information of each drop-down box element, configure the instance of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes; Each visual drop-down box corresponds to different levels according to the position relationship between two adjacent visual drop-down boxes;

Acquiring an option data set corresponding to the current drop-down box, and generating a drop-down list of the current drop-down box according to the acquired option data set;

When there is a lower-level drop-down box corresponding to the current drop-down box, monitor the drop-down box change event in the current drop-down box, and determine the target from the drop-down list of the current drop-down box according to the monitored drop-down box change event Option data; and

The option data set of the lower-level drop-down box is obtained according to the target option data, and the drop-down list of the lower-level drop-down box is generated according to the obtained option data set.

A device for implementing multi-level linkage drop-down boxes includes:

The page data acquisition module is used to acquire page data, where the page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element;

The drop-down box component obtaining module is used to obtain the drop-down box component corresponding to the drop-down box element, and respectively generate instances of each drop-down box element;

The rendering module is used to configure the instance of each drop-down box element according to the attribute information of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes Box; the plurality of visual drop-down boxes correspond to different levels according to the position relationship between each two adjacent visual drop-down boxes;

The first drop-down list generating module is configured to obtain the option data set corresponding to the current drop-down box, and generate the drop-down list of the current drop-down box according to the obtained option data set;

The event monitoring module is used to monitor the drop-down box change event in the current drop-down box when there is a lower-level drop-down box corresponding to the current drop-down box, and change the event from the current drop-down box according to the monitored drop-down box change event To determine the target option data in the drop-down list; and

The second drop-down list generating module is configured to obtain the option data set of the next-level drop-down box according to the target option data, and generate the drop-down list of the next-level drop-down box according to the obtained option data set.

A computer device, including a memory and one or more processors, the memory stores computer readable instructions, when the computer readable instructions are executed by the processor, the one or more processors execute The following steps:

One or more non-volatile computer-readable storage media storing computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the following steps:

The details of one or more embodiments of the application are set forth in the following drawings and description. Other features and advantages of this application will become apparent from the description, drawings and claims.

Description of the drawings

In order to more clearly describe the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings needed in the embodiments. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative work.

Fig. 1 is an application scenario diagram of a method for implementing a multi-level linkage drop-down box in one or more embodiments.

Fig. 2 is a schematic flowchart of a method for implementing a multi-level linkage drop-down box according to one or more embodiments.

Fig. 3 is a schematic flowchart of a method for implementing a multi-level linkage drop-down box in another embodiment.

Fig. 4 is a block diagram of a device for implementing a multi-level linkage drop-down box according to one or more embodiments.

Figure 5 is a block diagram of a computer device according to one or more embodiments.

Detailed ways

In order to make the technical solutions and advantages of the present application clearer, the following further describes the present application in detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described here are only used to explain the application, and not used to limit the application.

The implementation method of the multi-level linkage drop-down box provided in this application can be applied to the application environment as shown in FIG. 1. The terminal 102 communicates with the server 104 through the network. The terminal first obtains page data containing multiple drop-down box elements and attribute information from the server, and then obtains the drop-down box component corresponding to the drop-down box element, generates an instance of each drop-down box element, and corresponds to the drop-down box element according to the attribute information of each drop-down box element After the configuration is completed, the instance of each drop-down box element is rendered to obtain multiple visual drop-down boxes. After multiple visual drop-down boxes are obtained, the terminal can obtain the option data set corresponding to the current drop-down box. The selected option data collection generates the drop-down list of the current drop-down box, monitors the drop-down box change event in the current drop-down box, and determines the target option data from the drop-down list of the current drop-down box according to the monitored drop-down box change event, and obtains it according to the target option data The option data collection of the lower-level drop-down box generates the drop-down list of the lower-level drop-down box according to the obtained option data collection.

The terminal 102 may be, but is not limited to, various personal computers, notebook computers, smart phones, and tablet computers. The server 104 may be implemented by an independent server or a server cluster composed of multiple servers.

In some embodiments, as shown in FIG. 2, a method for implementing a multi-level linkage drop-down box is provided. Taking the method applied to the terminal in FIG. 2 as an example for description, the method includes the following steps:

Step S202: Obtain page data. The page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element.

The attribute information corresponding to the drop-down box element includes the attribute value set by the front-end developer for the corresponding attribute of the drop-down box element when developing the front-end page, the style attribute and position attribute of the drop-down box element, and the style attributes such as length, width, and height. The drop-down box component is a component encapsulated according to the select2.Js plug-in. The select2 function is defined in the component, and four attributes of select-key, select-value, select options, and ng-model are set. Select-options is a drop-down list Option data attributes, select-options uses the data object returned by the server as the data source, select-value is the selected value attribute, select-key is the key corresponding to the selected value, and ng-model is the two-way data binding attribute. Therefore, this embodiment In the front-end page, developers need to set the corresponding attribute values of the four attributes of select-key, select-value, select-options, and ng-model to the drop-down box elements to ensure that the resulting drop-down box can be used normally When setting the attribute value, ensure that the attribute value corresponding to each attribute is consistent with the corresponding field name in the database. It is understandable that the attribute value configured here is a variable. After the drop-down box is implemented, the drop-down box component can call the watch monitoring function to monitor the user's selection event in real time, and update the attribute value according to the user's selection event.

For example, for a drop-down box element used to implement bank selection, its corresponding attribute information can be set as:

select-key=bankcode, select-value=bankname,

Select-options="getPrevBankList", ng-model="disBankNo";

The bankcode and bankname are respectively consistent with the corresponding field names of the drop-down list option data in the database.

Specifically, the terminal can obtain page data from the server.

Step 204: Obtain the drop-down box components corresponding to the drop-down box elements, and generate instances of each drop-down box element respectively.

Specifically, the terminal can obtain the drop-down box component from the local component library, or obtain the drop-down box component from the server and register it. After obtaining the drop-down box component corresponding to the drop-down box element, instantiate the drop-down box component to obtain each The corresponding instance of the drop-down box element.

In some embodiments, the terminal acquiring the drop-down box component of the drop-down box element includes the following steps: query the current component registry to determine whether there is a registration record corresponding to the drop-down box element; if it exists, it will be stored locally according to the storage path in the registration record. Get the component corresponding to the drop-down box element in the component library; if it does not exist, send a component get request to the service, receive the drop-down box component returned by the server, and register the drop-down box component returned by the server.

Step 206: Configure an instance of each drop-down box element according to the attribute information of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes.

Specifically, the terminal configures instances of each drop-down box element according to the attribute information of each drop-down box element, including configuring drop-down list option data attributes, selected value attributes, key attributes corresponding to the selected values, and two-way data binding attributes. The style of the drop-down box configures the position of the drop-down box. After configuration, the terminal renders the instance corresponding to each drop-down box element to obtain multiple visual drop-down boxes.

In the multiple visual drop-down boxes, each two adjacent visual drop-down boxes correspond to different levels according to the position relationship, and the position relationship includes upper and lower adjacent and left and right adjacent. In some embodiments, the positional relationship is left and right adjacent, then the drop-down box on the left is the upper drop-down box corresponding to the adjacent drop-down box on the right, and the drop-down box on the right corresponds to the adjacent left drop-down box. The next drop-down box. In other embodiments, the positional relationship is adjacent to each other up and down, and the drop-down box on the upper side is the upper drop-down box corresponding to the adjacent drop-down box on the lower side, and the drop-down box on the lower side corresponds to the adjacent upper drop-down box. The next drop-down box.

At this time, the terminal can connect the option data returned by the server through the drop-down list option data attribute of the drop-down box, and call the monitoring function to monitor the user's selection event, and update the selected value attribute in real time according to the user's selection event, the key attribute corresponding to the selected value, two-way The variable value corresponding to each data binding property.

Step S208: Obtain the option data set corresponding to the current drop-down box, and generate a drop-down list of the current drop-down box according to the obtained option data set.

Step S210, when there is a lower-level drop-down box corresponding to the current drop-down box, monitor the drop-down box change event in the current drop-down box, and determine the target option data from the drop-down list of the current drop-down box according to the monitored drop-down box change event.

Step S212: Obtain the option data set of the lower-level drop-down box according to the target option data, and generate the drop-down list of the lower-level drop-down box according to the obtained option data set.

The current drop-down box refers to the drop-down box currently operated by the user. The lower-level drop-down box corresponding to the current drop-down box refers to the drop-down box adjacent to the current drop-down box and located to the right or below the current drop-down box.

In some embodiments, when there is a lower-level drop-down box corresponding to the current drop-down box, the option data of the lower-level drop-down box needs to be determined according to the drop-down box change event (onchange event) of the current drop-down box. When the user clicks any option data in the drop-down list of the current drop-down box, the drop-down box change event (onchange event) in the drop-down box is triggered, and the onchange event is used to indicate that the content of the drop-down box has changed. The terminal can monitor the onchange event of the current drop-down box. After successfully listening to the ochange event in the current drop-down box, it can obtain the option data set of the next-level drop-down box according to the option data corresponding to the monitored drop-down box change event. The option data collection of the lower-level drop-down box generates a drop-down list corresponding to the lower-level drop-down box.

In some embodiments, when the current drop-down box is the first-level drop-down box, the option data set of the current drop-down box may be determined by the identifier of the current drop-down box. Obtain the option data set from the server or the local database according to the identifier of the current drop-down box.

It is understandable that when the current drop-down box is not the first-level drop-down box, the option data set of the current drop-down box is acquired by the onchage event of the corresponding upper-level drop-down box. For the specific acquisition method, please refer to the above embodiment Description, this application will not repeat it here. It can also be understood that when the current drop-down box is the last-level drop-down box, there is no next-level drop-down box corresponding to the current drop-down box.

In the implementation method of the above-mentioned multi-level linkage drop-down box, the page data including multiple drop-down box elements and the attribute information corresponding to each drop-down box element is obtained, and then the drop-down box component corresponding to the drop-down box element is obtained to generate the respective drop-down box elements. Example, according to the attribute information of each drop-down box element, configure the instance of each drop-down box element. When the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes. After obtaining multiple visual drop-down boxes, The terminal can obtain the option data set corresponding to the current drop-down box, generate the drop-down list of the current drop-down box according to the obtained option data set, monitor the drop-down box change event in the current drop-down box, and change the event from the current drop-down box according to the monitored drop-down box The target option data is determined in the drop-down list, and the option data set of the next-level drop-down box is obtained according to the target option data, and the drop-down list of the next-level drop-down box is generated according to the obtained option data set. This application only needs to encapsulate one drop-down box Component, by calling the drop-down box component to generate the corresponding instance, it can realize multi-level linkage drop-down box in different scenes, which improves the code reuse rate, reduces code redundancy, and improves computer performance.

In some embodiments, obtaining the option data set of the next-level drop-down box according to the target option data, and generating the drop-down list of the next-level drop-down box according to the obtained option data set includes: sending the target option data to the server, and receiving the server The returned next-level option data queried based on the target option data obtains the option data set corresponding to the next-level drop-down box, and generates the drop-down list of the next-level drop-down box according to the obtained option data set.

Specifically, when the terminal monitors the drop-down box change event of the current drop-down box, it determines the target option data from the drop-down list of the current drop-down box according to the monitored drop-down box change event, sends the target option data to the server, and the server The target option data is determined as the primary key query condition to query in the database to obtain the corresponding data record. According to the obtained data record, determine the next-level option data corresponding to the target option data, and send it to the terminal. The terminal will receive the The option data is determined as the option data set corresponding to the drop-down box at the next level.

In some embodiments, the selection data set of the current drop-down box may be occupational data, such as professional technicians, service personnel, operators of production and transportation equipment, persons in charge of enterprises and institutions, etc. After the terminal obtains the occupational data from the server, it generates The drop-down list corresponding to the current drop-down box. When the user selects a career in the drop-down list of the current drop-down box, the drop-down box change event in the current drop-down box will be triggered. After the terminal listens to the drop-down box change event, it will change the drop-down box change event. The corresponding occupation is determined as the target occupation, and the loan use data corresponding to the target occupation is obtained from the server side, and the drop-down list corresponding to the lower-level drop-down box is generated based on the loan use data.

In some embodiments, after the instances of each drop-down box element are rendered to obtain multiple visual drop-down boxes, the method includes: obtaining a total set of option data corresponding to all drop-down boxes, and saving the obtained total set of option data to a local database; Get the option data set corresponding to the current drop-down box, and generate the drop-down list of the current drop-down box based on the obtained option data set, including: obtaining the option data set of the current drop-down box from the local database, and generating the current drop-down based on the obtained option data set The drop-down list of the box; according to the target option data to obtain the option data collection of the lower-level drop-down box, and generate the drop-down list of the next-level drop-down box according to the obtained option data collection, including: query the corresponding data from the local database according to the target option data The option data of the next level obtains the option data set corresponding to the drop-down box of the next level, and the drop-down list of the next level drop-down box is generated according to the obtained option data set.

Specifically, the total set of option data refers to the set of option data corresponding to all drop-down boxes. After getting the multiple drop-down boxes displayed, the terminal can obtain the total set of option data from the server, and save the total set of obtained option data in the local database. When saving, the option data of different drop-down boxes can be saved separately In different data tables, set the option data in the data table corresponding to the drop-down box with the lower-level drop-down box as the foreign key of the data table. When the terminal needs to obtain the option data set of the lower-level drop-down box, it will monitor the drop-down box change event of the current drop-down box. If it successfully monitors the drop-down box change event of the current drop-down box, it will change the event from the current drop-down box according to the drop-down box. The target option data is determined in the option data set of the box, and then the next-level option data corresponding to the target option data is queried from the local database, and the option data set of the next-level drop-down box is obtained according to the queried option data.

For example, when implementing the three-level linkage drop-down box of provinces, cities and counties, after the terminal gets the drop-down boxes corresponding to the displayed provinces, cities and counties, it obtains all the option data corresponding to the three drop-down boxes of province, city, and county from the server. , And save the option data corresponding to provinces, cities, and counties in different data tables in the local database. In the data table corresponding to the drop-down box at the provincial level, each province field is used as the foreign key of the data table, and it is also the city The primary key of the data table corresponding to the drop-down box at the city level, and in the data table corresponding to the drop-down box at the city level, each city field serves as the foreign key of the data table, and is also the primary key of the data table corresponding to the drop-down box at the county level. When the terminal needs to obtain option data from the city-level drop-down box, if the target option data corresponding to the change event in the drop-down box of the province-level drop-down box is monitored as "Hunan Province", then the data corresponding to the city-level drop-down box from the local database In the table, the data records with "Hunan Province" as the primary key are queried, and the selection data set corresponding to the city-level drop-down box is obtained according to the queried data records.

In this embodiment, the option data of each drop-down box is uniformly saved locally, which can improve the acquisition speed of the option data set corresponding to the drop-down box, thereby realizing the multi-level linkage drop-down box more quickly.

In some embodiments, after generating the drop-down list of the current drop-down box based on the obtained option data set, the method further includes: obtaining query keywords through the current drop-down box, and filtering from the drop-down list corresponding to the current drop-down box according to the query keywords , The drop-down list is visually displayed according to the screening results; when a selection operation on the drop-down list of the visual display is received, the drop-down box change event in the current drop-down box is triggered.

In this embodiment, the user can enter a query keyword in the current drop-down box, and the terminal filters the option data containing the query keyword from the drop-down list according to the query keyword, and visually displays the option data to obtain a visually displayed drop-down The drop-down list displayed at this time only contains the above option data filtered by keywords. When the user clicks any option data in the drop-down list displayed at this time, it will trigger the drop-down box change event in the current drop-down box. At this time, the terminal may obtain the option data set of the lower-level drop-down box according to the option data corresponding to the drop-down box change event, and then generate the drop-down list of the lower-level drop-down box according to the obtained option data set.

For example, when implementing the drop-down box of the three-level linkage of provinces, cities and counties in the above embodiment, when selecting the data "Hunan Province" in the drop-down box at the provincial level, the drop-down list of the city-level drop-down box can be obtained through the city-level drop-down list. Get the query keyword in the box, for example, "Yang", then the terminal will screen according to the query keyword "Yang" in the drop-down list to get "Shaoyang City", "Hengyang City", "Yueyang City", "Yiyang" City" and so on, and display a drop-down list based on these data. The displayed drop-down list includes four options of "Shaoyang City", "Hengyang City", "Yueyang City", and "Yiyang City". When the user clicks on "Shaoyang City" At the time, the terminal will receive the selection operation and trigger the drop-down box change event in the city-level drop-down box. According to the drop-down box to change the option data corresponding to the event (that is, Shaoyang City), the terminal can obtain the option data set corresponding to the county-level drop-down box .

In the above embodiment, the user can enter a query keyword in the drop-down box to make a query, which improves the convenience for the user to query data in the drop-down list corresponding to the drop-down box.

In some embodiments, after generating the drop-down list of the current drop-down box based on the obtained option data set, the method further includes: when a preset click event corresponding to the current drop-down box is monitored, obtaining the option data set corresponding to the current drop-down box The historical selection times of each option data in a preset time period; generate a reference list based on the option data whose historical selection times are greater than a preset threshold; visually display the drop-down list and the reference list.

The preset time period can be set according to needs, such as one week, one month, etc. The preset threshold can be set by the developer based on experience. The preset click event is a click event that can trigger the open event in the drop-down box, such as clicking on the drop-down box Drop-down button. In this embodiment, when the opening event corresponding to the current drop-down box is monitored, the terminal can obtain the historical selection times of each option data in the option data set corresponding to the current drop-down box within a preset time period, and according to the historical selection times greater than the preset The threshold option data generates a reference list, and visually displays the drop-down list corresponding to the current drop-down box and the reference list.

In some embodiments, obtaining the historical selection times of each option data in the preset time period in the option data set corresponding to the current drop-down box can be achieved by setting a buried point on the current page.

In this embodiment, when the preset click event corresponding to the current drop-down box is monitored, the historical selection times of each option data in the option data set corresponding to the current drop-down box within the preset time period are obtained, and the number of historical selections is greater than the preset time. The threshold option data generates a reference list, and displaying the drop-down list and the reference list at the same time can improve the user's selection efficiency.

In some embodiments, as shown in FIG. 3, a method for implementing multi-level linkage drop-down boxes is provided, including the following steps:

Step S302: Obtain page data. The page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element;

Step S304: Obtain the drop-down box components corresponding to the drop-down box elements, and respectively generate instances of each drop-down box element;

Step S306, according to the attribute information of each drop-down box element, configure the instance of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes;

Step S308: Obtain a total set of option data corresponding to all drop-down boxes, and save the obtained total set of option data in a local database;

Step S310, obtaining the option data set of the current drop-down box from the local database, and generating the drop-down list of the current drop-down box according to the obtained option data set;

Step S312: Obtain the query keyword through the current drop-down box, filter from the drop-down list corresponding to the current drop-down box according to the query keyword, and visually display the drop-down list according to the filtering result;

Step S314, when a selection operation on the drop-down list of the visual display is received, trigger a drop-down box change event in the current drop-down box;

Step S316, when there is a lower-level drop-down box corresponding to the current drop-down box, monitor the drop-down box change event in the current drop-down box, and determine the target option data from the drop-down list of the current drop-down box according to the monitored drop-down box change event;

Step S318: Query the corresponding next-level option data from the local database according to the target option data to obtain the option data set corresponding to the next-level drop-down box, and generate the drop-down list of the next-level drop-down box based on the obtained option data set.

For the explanation of the above step S302 to step S308, please refer to the description in the above embodiment, which will not be repeated in this application.

It should be understood that, although the various steps in the flowchart of FIGS. 2-3 are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless specifically stated in this article, the execution of these steps is not strictly limited in order, and these steps can be executed in other orders. Moreover, at least some of the steps in Figure 2-3 may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. These sub-steps or stages The execution order of is not necessarily performed sequentially, but may be performed alternately or alternately with at least a part of other steps or sub-steps or stages of other steps.

In some embodiments, as shown in FIG. 4, a device 400 for implementing a multi-level linkage drop-down box is provided, including:

The page data acquisition module 402 is used to acquire page data, and the page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element;

The drop-down box component obtaining module 404 is used to obtain the drop-down box components corresponding to the drop-down box elements, and respectively generate instances of each drop-down box element;

The rendering module 408 is used to configure the instance of each drop-down box element according to the attribute information of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes; multiple visualizations Each two adjacent visual drop-down boxes in the drop-down box correspond to different levels according to the position relationship;

The first drop-down list generating module 410 is configured to obtain the option data set corresponding to the current drop-down box, and generate the drop-down list of the current drop-down box according to the obtained option data set;

The event monitoring module 412 is used to monitor the drop-down box change event in the current drop-down box when there is a lower-level drop-down box corresponding to the current drop-down box, and determine from the drop-down list of the current drop-down box according to the monitored drop-down box change event Target option data;

The second drop-down list generating module 414 is configured to obtain the option data set of the next-level drop-down box according to the target option data, and generate the drop-down list of the next-level drop-down box according to the obtained option data set.

In some embodiments, the second drop-down list generation module 412 is configured to send the target option data to the server; receive the next-level option data queried according to the target option data returned by the server to obtain the option data corresponding to the next-level drop-down box Set; generate the drop-down list of the next-level drop-down box according to the obtained option data set.

In some embodiments, the above device further includes: an option data saving module, configured to obtain a total set of option data corresponding to all drop-down boxes, and save the obtained total set of option data in a local database; and a first drop-down list generating module 408 is also used to obtain the option data set of the current drop-down box from the local database, and to generate the drop-down list of the current drop-down box according to the obtained option data set; the second drop-down list generation module 412 is also used to obtain data from the local database according to the target option data Query the corresponding lower-level option data to obtain the option data set corresponding to the lower-level drop-down box, and generate the drop-down list of the lower-level drop-down box according to the obtained option data set.

In some embodiments, the above-mentioned apparatus further includes: a third drop-down list generating module, configured to obtain query keywords from the current drop-down box, filter from the drop-down list corresponding to the current drop-down box according to the query keywords, and select the drop-down list according to the screening results. The list is displayed visually; when a selection operation on the drop-down list of the visual display is received, the drop-down box change event in the current drop-down box is triggered.

In some embodiments, the above-mentioned apparatus further includes: a reference list generation module, which is used to obtain the preset time period of each option data in the option data set corresponding to the current drop-down box when the preset click event corresponding to the current drop-down box is monitored. The number of historical selections within; the reference list is generated based on the option data with the number of historical selections greater than the preset threshold; the drop-down list and the reference list are visually displayed.

For the specific definition of the device for implementing the multi-level linkage drop-down box, please refer to the above limitation on the implementation method of the multi-level linkage drop-down box, which will not be repeated here. Each module in the device for realizing the above-mentioned multi-level linkage drop-down box can be implemented in whole or in part by software, hardware, and a combination thereof. The foregoing modules may be embedded in the form of hardware or independent of the processor in the computer device, or may be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the foregoing modules.

In some embodiments, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as shown in FIG. 5. The computer equipment includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus. The processor of the computer device is used to provide calculation and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and computer readable instructions. The internal memory provides an environment for the operation of the operating system and computer-readable instructions in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer-readable instruction is executed by the processor, a method for implementing a multi-level linkage drop-down box is realized. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, or it can be a button, a trackball or a touchpad set on the housing of the computer equipment , It can also be an external keyboard, touchpad, or mouse.

Those skilled in the art can understand that the structure shown in FIG. 5 is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may Including more or fewer parts than shown in the figure, or combining some parts, or having a different arrangement of parts.

A computer device includes a memory and one or more processors. The memory stores computer-readable instructions. When the computer-readable instructions are executed by the processor, the one or more processors can realize the implementation provided in any one of the embodiments of the present application. Steps of the implementation method of the multi-level linkage drop-down box.

One or more non-volatile computer-readable storage media storing computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors implement any one of the embodiments of the present application. Provides the steps of the implementation method of the multi-level linkage drop-down box.

A person of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be implemented by instructing relevant hardware through computer-readable instructions, which can be stored in a non-volatile computer. In a readable storage medium, when the computer-readable instructions are executed, they may include the processes of the above-mentioned method embodiments. Wherein, any reference to memory, storage, database or other media used in the embodiments provided in this application may include non-volatile and/or volatile memory. Non-volatile memory may include read only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not a limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous chain Channel (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

The technical features of the above embodiments can be combined arbitrarily. In order to make the description concise, all possible combinations of the technical features in the above embodiments are not described. However, as long as there is no contradiction between the combinations of these technical features, they should It is considered as the range described in this specification.

The above-mentioned embodiments only express several implementation manners of the present application, and the description is relatively specific and detailed, but it should not be understood as a limitation on the scope of the invention patent. It should be pointed out that for those of ordinary skill in the art, without departing from the concept of this application, several modifications and improvements can be made, and these all fall within the protection scope of this application. Therefore, the scope of protection of the patent of this application shall be subject to the appended claims.

Claims

A method for implementing multi-level linkage drop-down boxes includes:

Acquiring page data, where the page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element;

Obtain the drop-down box component corresponding to the drop-down box element, and respectively generate instances of each drop-down box element;

According to the attribute information of each drop-down box element, configure the instance of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes; Each visual drop-down box corresponds to different levels according to the position relationship between two adjacent visual drop-down boxes;

Acquiring an option data set corresponding to the current drop-down box, and generating a drop-down list of the current drop-down box according to the acquired option data set;

When there is a lower-level drop-down box corresponding to the current drop-down box, monitor the drop-down box change event in the current drop-down box, and determine the target from the drop-down list of the current drop-down box according to the monitored drop-down box change event Option data; and

The option data set of the lower-level drop-down box is obtained according to the target option data, and the drop-down list of the lower-level drop-down box is generated according to the obtained option data set.
The method according to claim 1, characterized in that the option data set of the next-level drop-down box is obtained according to the target option data, and the drop-down list of the next-level drop-down box is generated according to the obtained option data set ,include:

Sending the target option data to the server;

Receiving the next-level option data queried according to the target option data returned by the server to obtain the option data set corresponding to the next-level drop-down box; and

The drop-down list of the next-level drop-down box is generated according to the obtained option data set.
The method according to claim 1, wherein after said rendering the instances of the respective drop-down box elements to obtain multiple visual drop-down boxes, the method further comprises:

Obtain a total set of option data corresponding to all drop-down boxes, and save the obtained total set of option data in a local database;

The obtaining the option data set corresponding to the current drop-down box, and generating the drop-down list of the current drop-down box according to the obtained option data set includes:

Obtain the option data set of the current drop-down box from the local database, and generate the drop-down list of the current drop-down box according to the obtained option data set; and

The obtaining the option data set of the next-level drop-down box according to the target option data, and generating the drop-down list of the next-level drop-down box according to the obtained option data set includes:

According to the target option data, the corresponding lower-level option data is queried from the local database to obtain the option data set corresponding to the lower-level drop-down box, and the drop-down list of the lower-level drop-down box is generated according to the obtained option data set.
The method according to claim 1, characterized in that, after said generating the drop-down list of the current drop-down box according to the obtained option data set, the method further comprises:

Obtain query keywords from the current drop-down box, filter from the drop-down list corresponding to the current drop-down box according to the query keywords, and visually display the drop-down list according to the screening results; and

When a selection operation acting on the drop-down list for visual display is received, the drop-down box change event in the current drop-down box is triggered.
The method according to claim 1, wherein after said generating the drop-down list of the current drop-down box according to the acquired option data set, the method further comprises:

When the preset click event corresponding to the current drop-down box is monitored, the number of historical selections within the preset time period of each option data in the option data set corresponding to the current drop-down box is obtained;

Generate a reference list based on the option data whose historical selection times are greater than a preset threshold; and

Visually display the drop-down list and the reference list.
The method according to any one of claims 1 to 5, wherein the obtaining the drop-down box component corresponding to the drop-down box element comprises:

Query the current component registry to determine whether there is a registration record corresponding to the drop-down box element in the current component registry;

If it exists, obtain the component corresponding to the drop-down box element from the local component library according to the storage path in the registration record; and

If it does not exist, send a component acquisition request to the service, receive the drop-down box component returned by the server, and register the drop-down box component returned by the server.
A device for implementing multi-level linkage drop-down boxes includes:

The page data acquisition module is used to acquire page data, where the page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element;

The drop-down box component obtaining module is used to obtain the drop-down box component corresponding to the drop-down box element, and respectively generate instances of each drop-down box element;

The rendering module is used to configure the instance of each drop-down box element according to the attribute information of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes Box; the plurality of visual drop-down boxes correspond to different levels according to the position relationship between each two adjacent visual drop-down boxes;

The first drop-down list generating module is configured to obtain the option data set corresponding to the current drop-down box, and generate the drop-down list of the current drop-down box according to the obtained option data set;

The event monitoring module is used to monitor the drop-down box change event in the current drop-down box when there is a lower-level drop-down box corresponding to the current drop-down box, and change the event from the current drop-down box according to the monitored drop-down box change event To determine the target option data in the drop-down list; and

The second drop-down list generating module is configured to obtain the option data set of the next-level drop-down box according to the target option data, and generate the drop-down list of the next-level drop-down box according to the obtained option data set.
8. The device according to claim 7, wherein the second drop-down list generating module is further configured to send the target option data to a server; receive the download information queried according to the target option data returned by the server For the first-level option data, the option data set corresponding to the next-level drop-down box is obtained; and the drop-down list of the next-level drop-down box is generated according to the obtained option data set.
A computer device includes a memory and one or more processors. The memory stores computer-readable instructions. When the computer-readable instructions are executed by the one or more processors, the one or more Each processor performs the following steps:

Acquiring page data, where the page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element;

Obtain the drop-down box component corresponding to the drop-down box element, and respectively generate instances of each drop-down box element;

According to the attribute information of each drop-down box element, configure the instance of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes; Each visual drop-down box corresponds to different levels according to the position relationship between two adjacent visual drop-down boxes;

Acquiring an option data set corresponding to the current drop-down box, and generating a drop-down list of the current drop-down box according to the acquired option data set;

When there is a lower-level drop-down box corresponding to the current drop-down box, monitor the drop-down box change event in the current drop-down box, and determine the target from the drop-down list of the current drop-down box according to the monitored drop-down box change event Option data; and

The option data set of the lower-level drop-down box is obtained according to the target option data, and the drop-down list of the lower-level drop-down box is generated according to the obtained option data set.
The computer device according to claim 9, wherein the processor further executes the following steps when executing the computer-readable instruction:

Sending the target option data to the server;

Receiving the next-level option data queried according to the target option data returned by the server to obtain the option data set corresponding to the next-level drop-down box; and

The drop-down list of the next-level drop-down box is generated according to the obtained option data set.
The computer device according to claim 9, wherein the processor further executes the following steps when executing the computer-readable instruction:

Obtain a total set of option data corresponding to all drop-down boxes, and save the obtained total set of option data in a local database;

Obtain the option data set of the current drop-down box from the local database, and generate the drop-down list of the current drop-down box according to the obtained option data set; and

According to the target option data, the corresponding lower-level option data is queried from the local database to obtain the option data set corresponding to the lower-level drop-down box, and the drop-down list of the lower-level drop-down box is generated according to the obtained option data set.
The computer device according to claim 9, wherein the processor further executes the following steps when executing the computer readable instruction:

Obtain query keywords from the current drop-down box, filter from the drop-down list corresponding to the current drop-down box according to the query keywords, and visually display the drop-down list according to the screening results; and

When a selection operation acting on the drop-down list for visual display is received, the drop-down box change event in the current drop-down box is triggered.
The computer device according to claim 9, wherein the processor further executes the following steps when executing the computer-readable instruction:

When the preset click event corresponding to the current drop-down box is monitored, the number of historical selections within the preset time period of each option data in the option data set corresponding to the current drop-down box is obtained;

Generate a reference list based on the option data whose historical selection times are greater than a preset threshold; and

Visually display the drop-down list and the reference list.
The computer device according to any one of claims 9 to 13, wherein the processor further executes the following steps when executing the computer readable instruction:

Query the current component registry to determine whether there is a registration record corresponding to the drop-down box element in the current component registry;

If it exists, obtain the component corresponding to the drop-down box element from the local component library according to the storage path in the registration record; and

If it does not exist, send a component acquisition request to the service, receive the drop-down box component returned by the server, and register the drop-down box component returned by the server.
One or more non-volatile computer-readable storage media storing computer-readable instructions, which when executed by one or more processors, cause the one or more processors to perform the following steps:

Acquiring page data, where the page data includes multiple drop-down box elements and attribute information corresponding to each drop-down box element;

Obtain the drop-down box component corresponding to the drop-down box element, and respectively generate instances of each drop-down box element;

According to the attribute information of each drop-down box element, configure the instance of each drop-down box element, and when the configuration is completed, render the instance of each drop-down box element to obtain multiple visual drop-down boxes; Each visual drop-down box corresponds to different levels according to the position relationship between two adjacent visual drop-down boxes;

Acquiring an option data set corresponding to the current drop-down box, and generating a drop-down list of the current drop-down box according to the acquired option data set;

When there is a lower-level drop-down box corresponding to the current drop-down box, monitor the drop-down box change event in the current drop-down box, and determine the target from the drop-down list of the current drop-down box according to the monitored drop-down box change event Option data; and

The option data set of the lower-level drop-down box is obtained according to the target option data, and the drop-down list of the lower-level drop-down box is generated according to the obtained option data set.
The storage medium according to claim 15, wherein the following steps are further performed when the computer-readable instructions are executed by the processor:

Sending the target option data to the server;

Receiving the next-level option data queried according to the target option data returned by the server to obtain the option data set corresponding to the next-level drop-down box; and

The drop-down list of the next-level drop-down box is generated according to the obtained option data set.
The storage medium according to claim 15, wherein the following steps are further executed when the computer-readable instructions are executed by the processor:

Obtain a total set of option data corresponding to all drop-down boxes, and save the obtained total set of option data in a local database;

Obtain the option data set of the current drop-down box from the local database, and generate the drop-down list of the current drop-down box according to the obtained option data set; and

According to the target option data, the corresponding lower-level option data is queried from the local database to obtain the option data set corresponding to the lower-level drop-down box, and the drop-down list of the lower-level drop-down box is generated according to the obtained option data set.
The storage medium according to claim 15, wherein the following steps are further executed when the computer-readable instructions are executed by the processor:

Obtain query keywords from the current drop-down box, filter from the drop-down list corresponding to the current drop-down box according to the query keywords, and visually display the drop-down list according to the screening results; and

When a selection operation acting on the drop-down list for visual display is received, the drop-down box change event in the current drop-down box is triggered.
The storage medium according to claim 15, wherein the following steps are further executed when the computer-readable instructions are executed by the processor:

When the preset click event corresponding to the current drop-down box is monitored, the number of historical selections within the preset time period of each option data in the option data set corresponding to the current drop-down box is obtained;

Generate a reference list based on the option data whose historical selection times are greater than a preset threshold; and

Visually display the drop-down list and the reference list.
The storage medium according to any one of claims 15 to 19, wherein the following steps are further executed when the computer-readable instructions are executed by the processor:

Query the current component registry to determine whether there is a registration record corresponding to the drop-down box element in the current component registry;

If it exists, obtain the component corresponding to the drop-down box element from the local component library according to the storage path in the registration record; and

If it does not exist, send a component acquisition request to the service, receive the drop-down box component returned by the server, and register the drop-down box component returned by the server.