这段时间在指导学生完成实训项目,由一个用到了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 select下拉框美化代码基于jquery.1.10.2.min.js制作,点击下拉框,显示下拉框内容。
80、jquery select下拉框美化代码
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
但是今天我们要为大家分享一款基于jQuery的Select下拉框美化插件,它完全重写了浏览器默认的Select下拉框样式,而且在下拉菜单展开时还伴随淡如淡出的动画效果,非常不错。当然我们以前也分享过一些类似的插件,可以...
jQuery select下拉框菜单选中插件,jQuery select下拉框菜单选中插件,jQuery select下拉框菜单选中插件
代码简介:jQuery Select下拉框美化特效是一款绿色清新风格的带有滚动条下拉框代码。
jQuery Select下拉框分类菜单多选插件一款功能比较全面的自定义下拉菜单选项多选代码,除了可以对选项进行分类,还带有搜索功能。
ui-select.js下拉框美化插件是一款能增强和美化网页默认select下拉框元素的jQuery Select下拉框美化代码,并且在所有浏览器中样式显示一致。
jQuery Select下拉框关键字匹配查询选择代码
jquery select下拉框美化代码是一款基于jQuery实现的点击展开下拉框菜单选择代码。
JQuery select下拉框美化插件是一款jquery结合jQueryUI对select下拉框美化以及功能性禁用的js插件。
jQuery Select下拉框美化插件.zip
jQuery Select下拉框美化表单基于jquery.selectlist.js和jquery-1.9.1.min.js制作,适用于招聘网站,下拉框选择学历和工资要求。
jquery动态创建联动下拉框和jquery动态创建下拉框
一款功能齐全的jQuery Select下拉框菜单选择插件,支持设置多选,单选,分组选择,禁用,搜索等常用的下拉框菜单选择功能。
小清新的jquery select 下拉框样式美化效果,和默认的下拉框相比,是不是漂亮了许多,我觉得这种更灵活吧,不但样式好看,而且也便于和你网页风格的融合,再些感谢作者的分享。