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. YARN配置

    环境搭建 mapred-site.xml <configuration> <property> <name>mapreduce.framework.name< ...

  2. 【算法】Normalization

    Normalization(归一化) 写这一篇的原因是以前只知道一个Batch Normalization,自以为懂了.结果最近看文章,又发现一个Layer Normalization,一下就懵逼了. ...

  3. windows 上传文件到 Linux 服务器

    方法一: pscp E:\javaWP\new11111.txt username@130.75.7.156:/home/

  4. MySQL存储过程（PROCEDURE）（一）

    一.定义与目的: 定义:存储过程是数据库 SQL 语言层面的代码封装与重用(是数据库中存储复杂程序,以便外部程序调用的一种数据库对象): 目的:我们为了完成特定功能的SQL语句集,经编译创建并保存在数 ...

  5. Java常见的10个异常

    1.NullPointerException: 空指针异常,当操作一个 null 对象的方法或属性时会抛出这个异常.是一个很头疼的异常,因为它是运行时异常,不需要手动捕获,但运行时碰到这个异常会中断程 ...

  6. angular2 图片赋值的时候前面自动加 unsafe:xxx 导致图片信息不显示问题

    需要创建一个pipe 代码如下 import { Pipe, PipeTransform } from '@angular/core'; import {DomSanitizer} from '@an ...

  7. 末学者笔记--Centos7系统部署cobbler批量安装系统

      [前言]: cobbler是一个可以实现批量安装系统的Linux应用程序.它有别于pxe+kickstart,cobbler可以实现同个服务器批量安装不同操作系统版本. 系统环境准备及其下载cob ...

  8. 【玩转开源】BananaPi R2 —— 第一篇 Openwrt安装

    最近手上拿到一块香蕉派的R2,这块板子可以用作路由器,所以决定在板子上面跑一下Openwrt. R2的外观长这个样子,看起来还是比较酷的: 硬件介绍 CPU 是MTK的4核芯片mt7623n,搭配mt ...

  9. vue原理20181211

    1. 打开浏览器从输入网址到网页呈现出来,经历了什么? 打开浏览器从输入网址到网页呈现出来,经历了什么? 1.1 DNS解析域名 1.2 TCP连接:TCP三次握手 1.3 发送HTTP请求 1.4 ...

  10. go time模块

    package main import ( "fmt" "time") func test() { time.Sleep(time.Millisecond * ...