Think that year, in order to achieve three-level linkage, find a JS master some more than n code to get it done, but very slow, because at one time to take all the options, and then sort, find dynamic display.
Now the use of Ajax is very convenient, the following made a simple example, the implementation of the Drop-down box provinces and cities linkage, the effect of the chart is as follows:
Implementation code:
A.html
<body>
<script language= "JavaScript" >
var req = null;
function Test () {
var province = document.all ("province"). Value;
req = new ActiveXObject ("Microsoft.XMLHTTP");
Sets the property to call the Mydeal method when the background processing is complete.
Req.onreadystatechange = Mydeal;
Making a request
Req.open ("Get", "c.jsp?province=" + Province, "false");
Req.send (NULL);
}
function Mydeal () {
if (req.readystate = = 4) {
Data returned by the receiving server
var ret = Req.responsetext;
Working with Data
var obj = document.all ("city");
for (var i = obj.options.length-1 i >= 0; i--) {
Obj.options.remove (i); Delete from the back forward
}
var ops = Ret.split ("|");
for (var i = 0; i < ops.length; i++) {
var op = ops[i];
var ss = Op.split (",");
var ooption = document.createelement ("option"); Create an option node
Obj.options.add (ooption); Add a node to the city option
Ooption.innertext = ss[1]; Set the information for the selection display
Ooption.value = Ss[0]; Set the value of an option
}
}
}
</script>
Province: <select id= "province" Name= province "onchange=" test (); >
<option value= "HN" > Henan </option>
<option value= "SX" > Shaanxi </option>
</select><br>
Cities: <select id= "City" Name= "Town" >
<option value= "zz" > Zhengzhou </option>
<option value= "ly" > Luoyang </option>
</select><br>
</body>
c.jsp
<%@ page contenttype= "Text/html;charset=utf-8" language= "java"%>
<%
String id = request.getparameter ("province");
System.out.println ("id=" +id);
if (ID!=null&& id.equals ("HN")) {
Out.println ("ZZ, Zhengzhou |ly, Luoyang");
}else if (id!= null && id.equals ("SX")) {
Out.println ("Xa, Xian city |xy, Xianyang");
}
%>
This function is very practical, the option data can be obtained from the database, in order to make the example simple point, with JSP to provide data.
Source: http://lavasoft.blog.51cto.com/62575/204884
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
