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. vue 双向数据绑定的实现学习（二）- 监听器的实现

    废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和  ...

  2. tomcat启动后产生的日志

    产生的日志  相当于 定时选取webapps里面搜索有没有超时的session,然后将超时的session关掉. 每一个webapp 都是独立的 一个application对应一个context,se ...

  3. shell脚本之不同系统上ftp交互使用

    场景:当公司将有文件要自动将ubuntu系统的文件要上传到windows上面,或者windows上的文件要下载到ubuntu上面,尤其是像什么日志啊,编译结果啊,测试结果啊等等,做个备份或者做分析处理 ...

  4. Ubuntu 18.04 安装MySQL

    最近在写东西的时候,需要用到MySQL,在网上查了一下,都说Ubuntu18.04不能安装MySQL5.7.22, 总觉的不可能,所以自己就研究了一下,然后分享给大家 工具/原料   VMware W ...

  5. postgre 常用语法，如 group_concat用法

    1.查询postgre的表所有字段列 select table_name, column_name from information_schema.columns where table_schema ...

  6. DDD - 概述 - (一)

    本片将介绍以下内容: 1).DDD是什么? 2).怎么使用DDD? 3).使用DDD应该规避或者注意什么? 一.DDD是什么? 简言之:领域驱动设计(domain driven design),顾名思 ...

  7. eclipse 开发环境问题

    1.jdk安装,环境变量设置.主要有两个: JAVA_HOME   C:\Program Files\Java\jre7 JRE_HOME   C:\Program Files\Java\jre7 2 ...

  8. Tomcat7配置Https

    使用的是UCloud的免费证书: 教程: https://docs.ucloud.cn/security/ussl/index 购买证书的地址: https://console.ucloud.cn/u ...

  9. Docker入门到实践

    1.什么是Docke 1.网上有很多 2.为什么要使用Docker? 优点 更高效的利用系统资源 更快速的启动时间 一致的运行环境 持续交付和部署 更轻松的迁移 更轻松的维护和扩展 3.Docker的 ...

  10. hashMap源码学习记录

    hashMap作为java开发面试最常考的一个题目之一,有必要花时间去阅读源码,了解底层实现原理. 首先,让我们看看hashMap这个类有哪些属性 // hashMap初始数组容量 static fi ...