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级联选择框的更多相关文章

  1. ElementUI 级联选择框 设置最后一级可选及相关问题解决

    在使用 elementUI 的 el-cascader 级联选择框进行省市联动效果时,有这么一个需求:该级联选择框一共有三级结构分别为国家-省份-城市,国家和省份为必选项,城市为可选项.具体实现如下: ...

  2. elementUI 级联选择框 表单验证

    今天遇到了一个需求:进行级联选择框的表单验证,突然有点懵逼.感觉应该和正常的表单验证类似,但不是很清晰,后来还是在博客园找到了相关参考文章. 先上代码: <el-form :model=&quo ...

  3. Excel 名称管理器是什么，并实现一个级联选择框

    名称 在 Excel 中,每一个单元格都有自己的名称.表格横向是字母,纵向是数字,组合起来就是一个单元格的名称. A13 所代表的是 A 列,13 行的单元格.把一组单元格组合起来,加上一个名称,在 ...

  4. Js异步级联选择框实践方法

    HTML: <li> <span>所在地区:</span> <select name="prov" id="ddl_prov&q ...

  5. combobox级联检索下拉选择框

    1.效果图 2.前端 @{ ViewBag.Title = "Index"; Layout = null; @*自动筛选下拉框*@ <script src="~/S ...

  6. jstree级联禁用后代节点的选择框

    用jstree+jquery,做的树形展示. 这个话题,在Stack Overflow上有问答,要获取要禁用的节点,然后用获取子节点方法遍历后代节点,设置禁用选择框. 之后发现,jstree的获取子节 ...

  7. js省市区级联选择联动

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  8. ExtJs4中的复选树级联选择

    好久没有写新的博文了,过了个年休息了近一个月,人都懒散了.. 这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样.升级并不是一件简单的是,基本相当于重写了, ...

  9. 转：『代码』JS封装 Ajax级联下拉列表

    在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址 //当一个 下拉列表 改变时,触发所有联动:(警告:各下拉列表之间 请不要出现 循环依赖) // ...

随机推荐

  1. 【interview】汉诺塔学递归

    https://www.cnblogs.com/yanlingyin/archive/2011/11/14/2247594.html https://www.cnblogs.com/dmego/p/5 ...

  2. 从头开始学gradle【Gradle 构建基础】

    构建基础 Project 和 task:projects 和 tasks是 Gradle 中最重要的两个概念. 任何一个 Gradle 构建都是由一个或多个 projects 组成.每个 projec ...

  3. 推荐前端开发手机调试打印神器console.log()

    下面说的这个插件很牛,相信很多人都不知道,但找问题的时候很需要,直接上干货如下: vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板. 下载 vConsole 的最新版本.(不要直接 ...

  4. 总结fiddle

    fiddler重新发送请求   模拟限速 http://caibaojian.com/fiddler.html fiddler模拟限速的原理 我们可以通过fiddler来模拟限速,因为fiddler本 ...

  5. python中单例模式的四种实现方式

    配置文件settings.py IP='100.0.0.2' PORT=3302 方式一:绑定给类的方法 class Mysql: __instance = None def __init__(sel ...

  6. JQuery插件：ScrollTo平滑滚动到页面指定位置

    1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...

  7. jenkins+git（完全萌新的一篇，求指点）

    自己不熟悉所以打算写一份新手的自我理解,有错误欢迎大家指出 公司使用jenkins和git对代码进行管理 首先我们将代码放在git上,然后通过一些方法(我还不知道啥方法) 将git的代码放在jenki ...

  8. java类型转化

    Java中的父类/子类相互转化问题: 子类可以转成父类:此时子类能调用父类中定义的方法和变量,如果子类中重写了父类中的一个方法,那么在调用这个方法的时候,将会调用子类中的这个方法 父类转成子类:1.如 ...

  9. python+selenium自动测试之WebDriver的常用API（基础篇二）

    本篇介绍一下python+selenium复杂操作的处理,基于python3.6,selenium3.141,详细资料介绍查看官方API文档,点击这里 一.常见特殊情况处理如iframe/弹窗处理 有 ...

  10. Metaphor of quotient space

    In James Munkres "Topology" Section 22, the quotient space is defined as below. Definition ...