Jquery Ajax achieves two-level drop-down menu Linkage

I. Overview:

Recently, during project development, you need to find the corresponding branch based on the Bank's master line. One drop-down menu shows the master line and the other drop-down menu shows the branch, as shown in:

 

II. Implementation steps:

Statement: Because my company uses its own framework, which was developed a long time ago, many of them are carried out on JSP pages. You can refer to my steps, then it can be implemented in some open-source frameworks.

 

1. assume that the bank selects bankinfo as the drop-down menu. JSP, in bankinfo. on the JSP page, first locate the master line of all banks, and then add all the objects of the master line to the drop-down menu corresponding to the master line.

2. Add the following code to bankinfo. jsp:

<%

 

Costaccountbo =NewCostaccountbo ();

List <bankvo> headbanks =
Costaccountbo. getallheadbank (); // headbanks is the List %>

 

// The following Code adds the list loop to select

<Select name ="Headbankselect"
Id ="Headbankselect"Onchange ="Selectsubbank ()">

<Option value =""> --- Clear and select the general line --- </option>

<%

For(Bankvo headbank:
Headbanks ){

%>

<Option value = <% = headbank. getcode ()
%> <% = Headbank. getname ()
%>

</Option>

<%

}

%>

</SELECT>

3. The page after adding the master line is shown in:

4. The selectsubbank method is triggered after you select the general line. Add the following code in JS:

 

Function selectsubbank (){

VaR headbank = Document. getelementbyid ("headbankselect ");

If (headbank. value! =
""){

Testajax (headbank. Value); // The number of the total line passed in the testajax Method

} Else {

VaR subbankselect
= Document. getelementbyid ("subbranchbankselect ");

VaR subbankselectlen
= Subbankselect. Options. length;

For (VAR I = 0;
I <subbankselectlen; I ++ ){

Subbankselect. Options [0]
= NULL;

}

Subbankselect. Options [0]
= New Option ("--- Select branch ---","");

}

}

 

// The testajax method uploads the total line number to the subbanksearch. jsp page of the processing page based on the number of the incoming total line (the specific processing of the summary on the subbanksearch page will be shown below)

 

Function
Testajax (headbankid ){

$. Ajax ({

'Url': 'subbanksearch. jsp ',

'Data': {headbankid: headbankid },

'Type': 'get ',

'Ype ype ': 'json ',

'Success': function (data ){

// Data is the data of the Branch found on the processing page based on the number of the master line.

VaR subbankselect =
Document. getelementbyid ("subbranchbankselect ");

VaR subbankselectlen =
Subbankselect. Options. length;

// The following loop clears the branch drop-down menu

For (VAR I = 0;
I <subbankselectlen; I ++ ){

Subbankselect. Options [0] = NULL;

}

VaR start = 0;

Subbankselect. Options [start] = New Option ("--- clear select branch ---","");

// The above line of code adds a default data row to the drop-down menu after clearing

Start ++;

// The following cycle adds the returned branch information to the branch drop-down menu

$. Each (data, function (entryindex, entry ){

Subbankselect. Options [start] =
New Option (entry, entryindex );

Start ++;

});

},

'Error': function (){

Alert ("error ");

}

}

);

}

5. The code in subbanksearch. jsp on the Ajax processing page is as follows:

 

<%

String headbankid = stringutil. Format (request. getparameter ("headbankid"); // obtain the total number of the request

Costaccountbo =NewCostaccountbo ();

String subbankjson = costaccountbo. getsubbanktojson (headbankid );

// The getsubbanktojson method is to convert the branch data to JSON data.

Printwriter outvalue = response. getwriter ();

Out. println (subbankjson );

%>

6. Code in the getsubbanktojson Method

 

PublicString getsubbanktojson (string
Headbankid ){

List <bankvo> banks =Null;

Banks = getsubbankbyheadbankid (headbankid); // This method is used to locate the corresponding branch information based on the number of the head office.Map <string, string> mapjson =NewHashmap <string, string> ();

 

For(Bankvo subbank: banks ){

 

Mapjson. Put (subbank. getcode (), subbank. getname ());

}

Jsonobject jsonobj = jsonobject.Fromobject(Mapjson );

Return
Jsonobj. tostring ();

}

 

7. The final page is shown in:

 

Iii. Summary:

 

Here is just a fixed Association of two levels of menus, there are many ways, the above method is just one that I prefer to use, you can also put it apart, you can perform n-level menu Association (if you have time, you will be given an example of N-level menu Association ).