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

时间：2022-06-25 17:41:28 编辑：袖梨来源：一聚教程网

使用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('');

});

} 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('');

});

}

});

}

});

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 '';

}
}

?>

基于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的下拉框级联操作

使用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;
   }
}

推荐专题

最新下载

热门教程

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

使用JQuery进行下拉框的联动

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程