Jquery Ajax Select 联动的三个实例分享

使用Jquery-Ajax改变Select标签进行联动

页面存在着一组select标签，它们的id分别是clientType和type。type随着clientType的选择而改变。

实例：

$('#clientType').change(function(){

var val =  $('#clientType option:selected').val();//获取当前选中的值

//根据不同情况请求不同数据

if(val == 1){

$('#type').empty();//把type清空

$.ajax({

url:"/message/template/getType?type=1",

async:true,

type:'GET',

contentType:"application/json",

dataType:"json",

success:function(data){

$.each(data,function (k,p){

$('#type').append(''+p.cname+'');

});

} else {

$('#type').empty();//把type清空

$.ajax({

url:"/message/template/getType?type=2",

async:true,

type:'GET',

contentType:"application/json",

dataType:"json",

success:function(data){

$.each(data,function (k,p){

$('#type').append(''+p.cname+'');

});

}

});

}

});


jquery ajax 读取联动菜单 select菜单

演示
 
JavaScript Code
 
 
XML/HTML Code

 
ajax.php
PHP Code
include('conn.php');  
if($_POST['id'])  
{  
$id=$_POST['id'];  
$sql=mysql_query("select * from smallclass where bigclassid='$id'");  
 
while($row=mysql_fetch_array($sql))  
{  
$id=$row['smallclassid'];  
$data=$row['smallclassname'];  
echo ''.$data.'';  
 
}  
}  
 
?>


基于JQuery的Select下拉框联动(级联)

这段时间在指导学生完成实训项目，由一个用到了JQuery进行下拉框（select）联动（添加删除option）的操作，本来在上课中都是讲过的，但时间一长都忘光了，下面把这段简单的JS贴出来，给入门者一个DEMO吧，以后有学生不会写的时候他能到这找到参考。

代码要点：

1、使用JQuery给select标签添加option元素时，直接使用：

$("筛选符").append("显示文字")

2、清空select中所有元素可以使用：

$(".child").html("")

    或者是

$(".child").empty()

3、获取select标签选择值时用：（直调用val()方法即可）

$(".parent").val()

下面是示例JSP页面全文：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

使用JQuery进行下拉框的联动

    改变教师下拉框，发送AJAX请求，根据返回的JSON数据重新填充学生下拉框。

---

服务端是用Struts的一个Action，使用Json-lib将数据转化成json字符串：（见全文）

public class SelectChangeAction {
    private static List teachers = new ArrayList();
    private static List students = new ArrayList();
    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 list = new ArrayList();
        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;
    }
}