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. Android Wear 2.0 AlarmManager 后台定时任务

    以前在Android 4.0时,alarmManager 没什么问题.后来android为了优化系统耗电情况,引入了doze模式,参见此页 https://developer.android.com/ ...

  2. VS中拒绝在if语句中赋值 （转）

    以前节选的内容,出处忘记了. 让Visual C++拒绝在if语句的条件表达式中赋值 一旦不小心把if (c == '+') {}写成了if (c = '+') {}是多么地悲剧. 写成下边这样吧if ...

  3. PostMan如何做Post请求测试

    首先要下载 一个Postman的软件,我这里没有下载地址,据说要翻 墙 下面是使用postman模拟post请求的步骤 我这里请求的API地址和请求的参数都是乱填写的,使用的时候请自行替换你们需要的A ...

  4. cookie记录横向滚动条位置

    一.Css <style type="text/css"> #x{ width: 100%; white-space: nowrap; overflow-x: scro ...

  5. 源码解析Django CBV的本质

    Django CBV模式的源码解析 通常来说,http请求的本质就是基于Socket Django的视图函数,可以基于FBV模式,也可以基于CBV模式. 基于FBV的模式就是在Django的路由映射表 ...

  6. 【转载】django 过滤器 、日期格式化参数

    过滤器相关: 一.形式:小写{{ name | lower }} 二.串联:先转义文本到HTML,再转换每行到 标签{{ my_text|escape|linebreaks }} 三.过滤器的参数显示 ...

  7. vue-cli项目 build后请求本地static文件中的 json数据，路径不对，报错404处理方法

    vue-cli 项目 build  出错点: 1,build生成dist 放在tomcat上 报错,不显示内容  解决办法: config>index.js===>assetsPublic ...

  8. 通过View.post()获取View的宽高

    在Android里,获取View宽高的时机是个老生常谈的话题了.众所周知,在Oncreate里直接调用View.getWidth或者View.getMeasuredWidth返回都是0.所以获取宽高时 ...

  9. unity Camera第一人称移动,3中方法实现

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class Player : ...

  10. Java基础知识总结（超级经典）

    Java基础知识总结(超级经典) 写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java ...