这段时间在指导学生完成实训项目，由一个用到了JQuery进行下拉框（select）联动（添加删除option）的操作，本来在上课中都是讲过的，但时间一长都忘光了，下面把这段简单的JS贴出来，给入门者一个DEMO吧，以后有学生不会写的时候他能到这找到参考。
代码要点：
1、使用JQuery给select标签添加option元素时，直接使用：
$("筛选符").append("<option value='隐藏值'>显示文字</option>")
2、清空select中所有元素可以使用：
$(".child").html("")
或者是
$(".child").empty()
3、获取select标签选择值时用：（直调用val()方法即可）
$(".parent").val()
下面是示例JSP页面全文：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<title>基于JQuery的下拉框级联操作</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function changChild(tid){
$.post("childSelect",{"tid":tid},function(json){
$(".child").html("");//清空学生下拉框
for(var i=0;i<json.length;i++){
//添加一个学生
$(".child").append("<option value='"+json[i].id+"'>"+json[i].name+"</option>");
}
},'json');
}
$(function(){
//初始化教师下拉框
$.post("parentSelect",null,function(json){
for(var i=0;i<json.length;i++){
//添加一个教师
$(".parent").append("<option value='"+json[i].id+"'>"+json[i].name+"</option>");
}
changChild($(".parent").val());
},'json');
//注册教师下拉框事件
$(".parent").change(function(){
changChild($(this).val());
});
});
</script>
</head>
<body>
<h3>使用JQuery进行下拉框的联动</h3>
<p>
改变教师下拉框，发送AJAX请求，根据返回的JSON数据重新填充学生下拉框。
</p>
<hr/>
<select class="parent"></select>
<select class="child"></select>
</body>
</html>
服务端是用Struts的一个Action，使用Json-lib将数据转化成json字符串：（见全文）
public class SelectChangeAction {
private static List<Teacher> teachers = new ArrayList<Teacher>();
private static List<Student> students = new ArrayList<Student>();
private int tid;
static{
Teacher teacher = null;
Student student = null;
for(int i=0;i<10;i++){
teacher = new Teacher();
teacher.setId(i);
teacher.setName("教师【"+i+"】");
for(int j=0;j<10;j++){
student = new Student();
student.setId(j);
student.setName(teacher.getName()+"的学生【"+i+"|"+j+"】");
student.setTeacher(teacher);
students.add(student);
}
teachers.add(teacher);
}
}
/**
* 输出教师信息
* @return
*/
public String parent(){
String json = JSONArray.fromObject(teachers).toString();
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
try {
response.getWriter().write(json);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
/**
* 输出学生信息
* @return
*/
public String child(){
List<Student> list = new ArrayList<Student>();
for (Student student : students) {
if(student.getTeacher().getId() == tid){
list.add(student);
}
}
String json = JSONArray.fromObject(list).toString();
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
try {
response.getWriter().write(json);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
public int getTid() {
return tid;
}
public void setTid(int tid) {
this.tid = tid;
}
}
仅以此文献给所有跟我学习没有学会的同学们！
分享到：
相关推荐
jQuery多级联动下拉框插件是一种常用的前端交互组件，主要应用于网页表单设计中，以实现级联选择的效果。这种插件可以帮助用户在多个下拉框之间建立关联，当用户在一级下拉框中选择一个选项时，二级下拉框会自动更新...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
在Web开发中，下拉框级联是一种常见的交互方式，用于构建多级选择的界面，例如省份、城市、区县的三级联动。本教程将详细讲解如何利用JQuery、Servlet和JSON技术来实现这一功能。 首先，JSON（JavaScript Object ...
4. **初始化select2**：使用JavaScript（如jQuery或原生JS）来初始化select2，并设置初始数据和级联事件。 ```javascript $(document).ready(function() { var provinces = [/* 省市区数据 */]; // 初始化省份...
"jquery三级下拉框联动"是指使用jQuery实现的多级下拉菜单联动效果，通常用于表示层次结构的数据，例如这里提到的城市级联，用户在选择省份后，下拉框会自动更新为对应省份的城市，再选择城市后，可能会进一步显示...
《jQuery多级联动美化版Select下拉框插件详解》 在Web开发中，我们经常需要处理复杂的表单，特别是涉及到多级联动选择时，如省份-城市-区县的选择，这种需求使得用户界面需要更加友好和高效。jQuery作为一款强大的...
casObjId: ['SelProvince', 'SelCity', 'SelArea', 'SelXian'], // 级联下拉框id casDefVal: ['全国', 5, '益阳', 22], // 级联默认值(Id,Name都可以) }); }); html： <h2> 省级联动 <select id=...
在IT行业中，下拉框级联（Cascading Dropdown）是一种常见的交互设计，它用于创建联动效果，使得用户在一个下拉框的选择会影响到另一个下拉框的选项。这种设计常见于多级分类选择或者关联数据的筛选，如国家、城市、...
三级级联下拉框则是指三个互相联动的下拉菜单，当用户在一个下拉框中选择一个选项时，其他关联的下拉框会根据所选选项动态更新其内容。在本教程中，我们将探讨如何使用JavaScript库JQuery来实现这样的功能。 首先，...
在网页开发中，有时我们需要创建具有级联效果的下拉框，这在用户界面设计中很常见，特别是在处理多层级分类或选择时。"使用XML文件实现3级下拉框级联"是一种有效的方法，尤其当数据量适中时。这种方法允许我们通过...
1. HTML结构：下拉框通常通过`<select>`元素创建，每个级联的`<select>`需要有一个特定的ID以便于jQuery操作。 2. CSS样式：为了美化下拉框，插件可能包含自定义的CSS样式，确保与页面其他元素协调一致。 3. ...
今天我们要来分享一款很实用的jQuery插件，它是一个基于jQuery多级联动的省市地区Select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个Select下拉框也...
级联下拉框是一种常见的UI组件，它允许用户在一个下拉框的选择基础上动态加载并显示另一个相关的下拉框，这种联动效果在数据筛选、地区选择等场景中非常常见。 1. HTML基础： HTML（HyperText Markup Language）...
这可以通过JQuery或者其他JavaScript库实现，向服务器发送一个请求，服务器响应新的选项列表，然后在客户端动态更新下拉框。 5. **JSON数据交换**：在Ajax请求中，服务器端通常会返回JSON格式的数据，因为JSON易于...
本主题将深入探讨如何利用jQuery AJAX实现动态级联效果，即二级联动下拉菜单，这种功能通常用于多级分类选择或者地区选择等场景。 首先，让我们了解什么是jQuery和AJAX。jQuery是一个强大的JavaScript库，简化了...
通过这样的方式，Ajax无刷新下拉框联动不仅可以应用于级联选择，还可以扩展到其他场景，比如根据用户输入实时搜索建议、动态加载分页内容等。它大大提升了Web应用的交互性和效率，是现代Web开发中不可或缺的一部分。...
在IT行业中，级联（Cascading）是一种常见的设计模式，尤其在前端开发中，它经常用于实现下拉框的联动效果，例如省份选择后自动更新城市列表等。本示例是一个基于jQuery实现的级联功能，同时也包含了与MySQL数据库...
引入CSS和JS文件后，记得在页面中添加jQuery库，因为`Select2`是基于jQuery的。 2. **HTML结构** 创建一个基础的HTML结构，包括三个`<select>`元素，分别代表省份、城市和区县。每个`select`元素都有对应的ID，...
用JQuery和select来实现汽车厂商和汽车类型的联动，参考过程如下 效果图： 逻辑分析图： html代码： <!DOCTYPE ...