Ajax + Servlet achieves the effect of refreshing drop-down links,

Ajax + Servlet achieves the effect of refreshing drop-down links,

The drop-down linkage function is very commonly used, for example, when selecting province or city information, or when selecting a large or small category. In short, drop-down Association is very common. Today I will share with you a simple secondary drop-down linkage function.

CATEGORY drop-down box: the drop-down options of the category are initialized when the page is loaded, and data is obtained through the background code in the database (of course, the unchanged content like the province and city can be directly assigned to the value ), then load it to the drop-down list.

<Select name = "region" class = "select1" id = "BigClass" onchange = "selectProv (this) "> <option value =" 0 "> -- all -- </option> <% Map = ClientManager. getInstance (). getRegionList (); for (Iterator iter = map. entrySet (). iterator (); iter. hasNext ();) {Map. entry entry = (Map. entry) iter. next (); %> <option value = "<% = entry. getKey () %> "> <% = entry. getValue () %> </option> <% }%> </select>

Small Class drop-down box: the drop-down option of a small class is to asynchronously submit the content of the selected class to a Servlet through Ajax, then return the corresponding small class content, and finally load it into the small class drop-down option.

<Select name = "province" class = "select1" id = "SmallClass"> <option value = "0"> -- all -- </option> </select>

Get and load the JS Code of the small class drop-down box:

<Script type = "text/javascript"> function selectProv (field) {var xmlHttp = null; // indicates that the current browser is not ie, such as ns, firefox if (window. XMLHttpRequest) {xmlHttp = new XMLHttpRequest ();} else if (window. activeXObject) {xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");} var url =" $ {pageContext. request. contextPath}/servlet/SelectProvServlet? RegionId = "+ trim (field. value) + "& time =" + new Date (). getTime (); // set the request method to get, set the request URL, and set it to submit xmlHttp asynchronously. open ("GET", url, true); xmlHttp. onreadystatechange = function () {// Ajax engine status is successful if (xmlHttp. readyState = 4) {// the HTTP protocol status is successful if (xmlHttp. status = 200) {var doc = xmlHttp. responseXML; var items = doc. getElementsByTagName ("item"); // obtain the small class drop-down list var provSelect = document. getElementById ("SmallClass"); // clear the value provSelect in the small class drop-down list. options. length = 0; var o = new Option ("-- all --", 0); provSelect. add (o); for (var I = 0; I <items. length; I ++) {var id = items [I]. childNodes [0]. firstChild. nodeValue; var name = items [I]. childNodes [1]. firstChild. nodeValue; var o = new Option (name, id); provSelect. add (o) ;}} else {alert ("request failed, error code =" + xmlHttp. status) ;}}; // send the setting information to the Ajax engine xmlHttp. send (null) ;}</script>

The specific method of retrieving data from the database is not described here. It is a common query, which is relatively simple. Two-level linkage, three-level linkage, and multi-level linkage are the same, that is, loading the content of a drop-down box in advance, loading the following drop-down box options based on the first selected content, and so on. After the second-level linkage is mastered, the others will be closed, that is, adding a few more drop-down boxes.

OK. Are you ready to continue? It's not as exciting as action, so hurry up and try it! Welcome to the discussion.