Home > Developer > Web Develop
Ajax cascading selection Box
Cascading selection box Common and more responsible for web development, such as the implementation of the Product add page, you need to select the classification of goods, and classification information has a hierarchy, such as large classification and small classification is two-level, when the user selects the product belongs to the large category, the content of its own small category needs to be replaced by large categories of classified content.
Code implementation;
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Send (args)
Args: This parameter is the requested parameter information, which is a string that can be used to concatenate multiple parameters using the "&" symbol.
Xmlhttp.open ("POST", "typeservice.jsp", true); Make an HTTP request
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ("type=" +type);
<script language= "JavaScript" >
var xmlHttp;
function Createrequest (type) {
Initialize the object and issue a XMLHttpRequest request
XmlHttp = false;
if (window. XMLHttpRequest) {//browser other than IE
XmlHttp = new XMLHttpRequest ();
} else if (window. ActiveXObject) {//IE browser
try {
XmlHttp = new ActiveXObject ("Msxml2.xmlhttp");
} catch (e) {
try {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!xmlhttp) {
Alert ("Cannot create XMLHTTP instance!");
return false;
}
Xmlhttp.onreadystatechange = insertcontents; Specify a method for handling response results
Xmlhttp.open ("POST", "typeservice.jsp", true); Make an HTTP request
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ("type=" +type);
}
function insertcontents () {//processing the information returned by the server
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Subtype.innerhtml=xmlhttp.responsetext;
} else {
Alert (' The page you requested was found to be wrong ');
}
}
}
</script>
<body>
<table width= "border=" 0 "align=" center "cellpadding="-2 "cellspacing="-2 "bordercolordark=" #FFFFFF ">
<form action= "" method= "Post" Name= "Form1" >
<tr>
<TD width= "20%" height= ">" Product name:</td>
<TD height= "colspan=" 3 ">
<input name= "Goodsname" type= "text" class= "Sytle_text" id= "bookID2" size= ">"
</td>
</tr>
<tr>
<TD height= "Qi" > Belongs to large class:</td>
<TD width= "35%" height= "> "
<select name= "type" class= "textarea" id= "type" onchange= "Createrequest (this.value)" >
<%
Jdbcdao dao = new Jdbcdao ();
list<string> types = Dao.gettypes ();
for (String type:types) {
Out.println ("<option value= '" +type+ ">" + Type + "</option>");
}
%>
</select></td>
<TD width= "18%" height= ">" category:</td>
<TD width= "42%" height= "id=" > </td>
</tr>
<tr>
<TD height= "Photos" > Photo files:</td>
<TD height= "> "
<input name= "Picture" type= "text" class= "Style_upload" id= "Picture" >
</td>
<TD height= "$" > Pricing:</td>
<TD height= "> "
<input name= "Price" size= "8" type= "text" class= "Sytle_text" id= "Price" >
(Yuan) </td>
</tr>
<tr>
<TD height= "103" > Product introduction:</td>
<TD colspan= "3" ><span class= "Style5" > </span>
<textarea name= "introduce" cols= "" rows= "5" class= "textarea" id= "introduce" ></textarea></td>
</tr>
<tr>
<TD height= "colspan=" 4 "align=" center "><input name=" button "type=" button "
class= "Btn_grey" value= "Save" onclick= "MyCheck ();" >
<input name= "Submit2" type= "reset" class= "Btn_grey" value= "reset" >
</td>
</tr>
</form>
</table>
<script language= "JavaScript" >
Createrequest (Form1.type.value);
</script>
</body>
<%
Request.setcharacterencoding ("UTF-8");
String type = Request.getparameter ("type");
Jdbcdao dao = new Jdbcdao ();
list<string[]> subtypes = dao.getsubtypes (type);
%>
<select name= "TypeID" class= "textarea" id= "TypeID" >
<%
For (String subtype[]: subtypes) {
%>
<option value= "<%=subType[0]%>" ><%=subType[1]%></option>
<%}
%>
</select>
Public list<string> GetTypes () {
List types=new ArrayList (); Create a list collection
Statement stmt = null;
ResultSet rs = null; Creating a JDBC Result set object
Connection conn = Getconn (); Connecting to a database
try {
Defining SQL query statements
String sql = "Select type from Tb_type GROUP by type";
stmt = Conn.createstatement ();
rs = stmt.executequery (SQL); Execute the SQL query and get the result set
while (Rs.next ()) {//Traversal result set
String type = rs.getstring (1);
Types.add (type); Add large classification information to the list collection
}
} catch (SQLException ex) {
Logger.getlogger (GetClass (). GetName ()). log (Level.severe, NULL, ex);
} finally {
Close (RS, stmt, conn); Whether the JDBC Resource
}
return types; Returns a list collection that holds large classification information
}
Public list<string[]> getsubtypes (String type) {
List subtypes=new ArrayList (); Create a list collection
Statement stmt = null;
ResultSet rs = null; Creating a JDBC Result set object
Connection conn = Getconn (); Connecting to a database
try {
Defining SQL query statements
String sql = "Select Id,subtype from Tb_type where type= '" +type+ "'";
stmt = Conn.createstatement ();
rs = stmt.executequery (SQL); Execute the SQL query and get the result set
while (Rs.next ()) {//Traversal result set
Using arrays to save small-class information
String subtype[] = {rs.getstring (1), rs.getstring (2)};
Subtypes.add (subtype); Add a small categorization to the list collection
}
} catch (SQLException ex) {
Logger.getlogger (GetClass (). GetName ()). log (Level.severe, NULL, ex);
} finally {
Close (RS, stmt, conn); Whether the JDBC Resource
}
return subtypes; Returns a list collection of small categorization information
}
Ajax cascading selection Box
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
