这段时间在指导学生完成实训项目,由一个用到了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;
- }
- }