Ajax级联选择框

Posted 姗姗不来迟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax级联选择框相关的知识,希望对你有一定的参考价值。

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">&nbsp;
<input name="goodsName" type="text" class="Sytle_text" id="bookID2" size="50">
&nbsp;&nbsp; </td>
</tr>
<tr>
<td height="27">所属大类:</td>
<td width="35%" height="27">&nbsp;
<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">&nbsp;</td>
</tr>
<tr>
<td height="41">图片文件:</td>
<td height="41">&nbsp;
<input name="picture" type="text" class="Style_upload" id="picture">
</td>
<td height="41">定  价:</td>
<td height="41">&nbsp;
<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">&nbsp; </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();">
&nbsp;
<input name="Submit2" type="reset" class="btn_grey" value="重置">
&nbsp;</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级联选择框的主要内容,如果未能解决你的问题,请参考以下文章

elementui级联选择器一级选择框不显示

级联选择器 两级不在框中显示

Django/jQuery 级联选择框?

ajax级联下拉列表框

组合框级联效应不适用于不同的行

element Ui的级联选择器 任意一级选中下拉框自动关闭