If you want to extract some strings from the item list, then fill them in the drop-down list.
For example, a sample Java program is as follows:
1
2
3
4
5
6
7
8
|
PackageOnlyfun. Caterpillar;
Public ClassOption {
PublicString [] getoptions (){
// In fact, these strings are found from the information...
Return NewString [] {"Liangge", "Mao Meimei", "mi puppy "};
}
} |
In the response string column, you need to fill in the response to the drop-down list. Of course, first we need to develop this object in DWR. xml...
1
2
3
4
5
6
7
8
9
10
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="OPT">
<param name="class" value="onlyfun.caterpillar.Option"/>
</create>
</allow>
</dwr>
|
This is our website...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = big5">
<SCRIPT src = "option. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "DWR/interface/OPT. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "DWR/engine. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "DWR/util. js" type = "text/JavaScript"> </SCRIPT>
</Head>
<Body>
Optional values: <select id = "opts"> </SELECT>
</Body>
</Html>
|
The response string will be filled in opts select. Our option. JS is as follows...
1
2
3
4
5
6
7
8
|
window.onload = function() {
OPT.getOptions(populate);
};
function populate(list){
DWRUtil.removeAllOptions("opts");
DWRUtil.addOptions("opts", list);
} |
Too many orders... No need to parse...
Let's take a look at the result...
Okay! I know someone is talking about this program...
Change it! This is an example of continuous operation, such as manual operation! What is it in Ajax in action? Dynamic double combo ?...
The following figure shows a Java program that looks up the data from the data source:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
package onlyfun.caterpillar;
import java.util.Map;
import java.util.TreeMap;
public class Bike {
private Map<String, String[]> bikes;
public Bike() {
bikes = new TreeMap<String, String[]>();
bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"});
bikes.put("2001", new String[] {"2001 A1", "2001 A2"});
bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"});
bikes.put("2003", new String[] {"2003 S320"});
bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"});
}
public String[] getYears() {
String[] keys = new String[bikes.size()];
int i = 0;
for(String key : bikes.keySet()) {
keys[i++] = key;
}
return keys;
}
public String[] getBikes(String year) {
return bikes.get(year);
}
} |
Getyears () and getbkies () indicate the year and type of the product separately. In this example, map is used to model the product. In reality, the information on the product is the query result of the raw data.
In the same way, set in DWR. xml:
1
2
3
4
5
6
7
8
9
10
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="Bike" scope="application">
<param name="class" value="onlyfun.caterpillar.Bike"/>
</create>
</allow>
</dwr>
|
We will have a tour year and model check panel:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = big5">
<Title> insert title here </title>
<SCRIPT type = 'text/JavaScript 'src = 'dwr/interface/bike. js'> </SCRIPT>
<SCRIPT type = 'text/JavaScript 'src = 'dwr/engine. js'> </SCRIPT>
<SCRIPT type = 'text/JavaScript 'src = 'dwr/util. js'> </SCRIPT>
<SCRIPT type = 'text/JavaScript 'src = 'bike. js'> </SCRIPT>
</Head>
<Body onload = "refreshyearlist ();">
Year: <select id = "years" onchange = "refreshbikelist ();"> </SELECT> <br/>
Type: <select id = "bikes"> </SELECT> <br/>
</Body>
</Html>
|
Note: after the first year is selected, the onchange event will be triggered, and the second drop-down list will automatically fill in the type of the corresponding year, instead of pressing by hour, then retrieve the second drop-down list, and then refresh... blah... blah...
Bike. JS is as follows...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function refreshYearList() {
Bike.getYears(populateYearList);
}
function populateYearList(list){
DWRUtil.removeAllOptions("years");
DWRUtil.addOptions("years", list);
refreshBikeList();
}
function refreshBikeList() {
var year = $("years").value;
Bike.getBikes(year, populateBikeList);
}
function populateBikeList(list){
DWRUtil.removeAllOptions("bikes");
DWRUtil.addOptions("bikes", list);
} |
Very simple...
Look at a chat face... XD
