Ajax级联选择框
级联选择框常用与比较负责的网页开发，例如实现的商品添加页面中，需要选择商品的分类，而分类信息又有层次，例如大分类和小分类就是两层级联，在用户选择商品所属大类时，所属小类的内容需要根据商品大分类替换分类内容。
代码实现;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
send(args)
args：这个参数是请求的参数信息，它是一个字符串可以使用“&”符号连接多个参数。
xmlHttp.open("POST", "typeService.jsp", true); ??????????????????????//发出HTTP请求
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("type="+type);
<script language="javascript">
???var xmlHttp;
???function createRequest(type) {
???????//初始化对象并发出XMLHttpRequest请求
???????xmlHttp = false;
???????if (window.XMLHttpRequest) { ????????????????????????????????????????????// 除IE以外的浏览器
???????????xmlHttp = new XMLHttpRequest();
???????} else if (window.ActiveXObject) { ??????????????????????????????????????????????// IE浏览器
???????????try {
???????????????xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
???????????} catch (e) {
???????????????try {
???????????????????xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
???????????????} catch (e) {}
???????????}
???????}
???????if (!xmlHttp) {
???????????alert("不能创建XmlHttp实例!");
???????????return false;
???????}
???????xmlHttp.onreadystatechange = insertContents; ?????????????????????????????//指定处理响应结果的方法
???????xmlHttp.open("POST", "typeService.jsp", true); ??????????????????????//发出HTTP请求
???????xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
???????xmlHttp.send("type="+type);
???}
???function insertContents() { ?????????????????????//处理服务器返回的信息
???????if (xmlHttp.readyState == 4) {
???????????if (xmlHttp.status == 200) {
???????????????subType.innerHTML=xmlHttp.responseText;
???????????} else {
???????????????alert(‘您请求的页面发现错误‘);
???????????}
???????}
???}
</script>
<body>
???<table width="600" ?border="0" align="center" cellpadding="-2" cellspacing="-2" bordercolordark="#FFFFFF">
???????<form action="" method="post" name="form1">
???????????<tr>
???????????????<td width="20%" height="27">商品名称：</td>
???????????????<td height="27" colspan="3">
???????????????????<input name="goodsName" type="text" class="Sytle_text" id="bookID2" size="50">
??????????????? </td>
???????????</tr>
???????????<tr>
???????????????<td height="27">所属大类：</td>
???????????????<td width="35%" height="27">
???????????????????<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="27">所属小类：</td>
???????????????<td width="42%" height="27" id="subType"> </td>
???????????</tr>
???????????<tr>
???????????????<td height="41">图片文件：</td>
???????????????<td height="41">
???????????????????<input name="picture" type="text" class="Style_upload" id="picture">
???????????????</td>
???????????????<td height="41">定 价：</td>
???????????????<td height="41">
???????????????????<input name="price" size="8" type="text" class="Sytle_text" id="price">
???????????????(元)</td>
???????????</tr>
???????????<tr>
???????????????<td height="103">商品简介：</td>
???????????????<td colspan="3"><span class="style5"> </span>
???????????????<textarea name="introduce" cols="50" rows="5" class="textarea" id="introduce"></textarea></td>
???????????</tr>
???????????<tr>
???????????????<td height="28" colspan="4" align="center"><input name="Button" type="button"
class="btn_grey" value="保存" onClick="mycheck();">
???????????????????
???????????????????<input name="Submit2" type="reset" class="btn_grey" value="重置">
??????????????? </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(); ????????????// 创建List集合
???Statement stmt = null;
???ResultSet rs = null; ???????????????????// 创建JDBC结果集对象
???Connection conn = getConn(); ???????????// 连接数据库
???try {
???????// 定义SQL查询语句
???????String sql = "SELECT type FROM tb_type GROUP BY type";
???????stmt = conn.createStatement();
???????rs = stmt.executeQuery(sql); ???????// 执行SQL查询，并获取结果集
???????while (rs.next()) { ????????????????// 遍历结果集
???????????String type = rs.getString(1);
???????????types.add(type); ???????????????// 添加大分类信息到List集合
???????}
???} catch (SQLException ex) {
???????Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
???} finally {
???????close(rs, stmt, conn); ?????????????// 是否JDBC资源
???}
???return types; ??????????????????????????// 返回保存大分类信息的List集合
}
public List<String[]> getSubTypes(String type) {
???List subTypes=new ArrayList(); ?????????// 创建List集合
???Statement stmt = null;
???ResultSet rs = null; ???????????????????// 创建JDBC结果集对象
???Connection conn = getConn(); ???????????// 连接数据库
???try {
???????// 定义SQL查询语句
???????String sql = "SELECT id,subType FROM tb_type where type=‘"+type+"‘";
???????stmt = conn.createStatement();
???????rs = stmt.executeQuery(sql); ???????// 执行SQL查询，并获取结果集
???????while (rs.next()) { ????????????????// 遍历结果集
???????????// 使用数组保存小分类信息
???????????String subType[] = {rs.getString(1),rs.getString(2)};
???????????subTypes.add(subType); ?????????// 添加小分类信息到List集合
???????}
???} catch (SQLException ex) {
???????Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
???} finally {
???????close(rs, stmt, conn); ?????????????// 是否JDBC资源
???}
???return subTypes; ???????????????????????// 返回小分类信息的List集合
}
Ajax级联选择框
原文地址：https://www.cnblogs.com/hao-lei/p/8360940.html