夏日博客

A-A+

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

2016年01月11日 前端设计 评论 1 条 阅读 6 views 次

本文我们分享三个Jquery Ajax Select 联动的实例，分别是使用Jquery-Ajax改变Select标签进行联动，jquery ajax 读取联动菜单 select菜单，基于JQuery的Select下拉框联动(级联)。
使用Jquery-Ajax改变Select标签进行联动.

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

实例:

  1. $('#clientType').change(function(){  
  2.   
  3. var val =  $('#clientType option:selected').val();//获取当前选中的值  
  4.   
  5. //根据不同情况请求不同数据  
  6.   
  7. if(val == 1){  
  8.   
  9. $('#type').empty();//把type清空  
  10.   
  11. $.ajax({  
  12.   
  13. url:"/message/template/getType?type=1",  
  14.   
  15. async:true,  
  16.   
  17. type:'GET',  
  18.   
  19. contentType:"application/json",  
  20.   
  21. dataType:"json",  
  22.   
  23. success:function(data){  
  24.   
  25. $.each(data,function (k,p){  
  26.   
  27. $('#type').append('<option value="'+p.code+'">'+p.cname+'</option>');  
  28.   
  29. });  
  30.   
  31. } else {  
  32.   
  33. $('#type').empty();//把type清空  
  34.   
  35. $.ajax({  
  36.   
  37. url:"/message/template/getType?type=2",  
  38.   
  39. async:true,  
  40.   
  41. type:'GET',  
  42.   
  43. contentType:"application/json",  
  44.   
  45. dataType:"json",  
  46.   
  47. success:function(data){  
  48.   
  49. $.each(data,function (k,p){  
  50.   
  51. $('#type').append('<option value="'+p.code+'">'+p.cname+'</option>');  
  52.   
  53. });  
  54.   
  55. }  
  56.   
  57. });  
  58.   
  59. }  
  60.   
  61. });  

jquery ajax 读取联动菜单 select菜单

演示,JavaScript Code.

  1. <script type="text/javascript">    
  2. $(document).ready(function()    
  3. {    
  4. $(".country").change(function()    
  5. {    
  6. var id=$(this).val();    
  7. var dataString = 'id='+ id;    
  8.     
  9. $.ajax    
  10. ({    
  11. type: "POST",    
  12. url: "ajax.php",    
  13. data: dataString,    
  14. cache: false,    
  15. success: function(html)    
  16. {    
  17. $(".city").html(html);    
  18. }     
  19. });    
  20.     
  21. });    
  22. });    
  23. </script>  

XML/HTML Code

  1. <div style="margin:20px">    
  2. <label>大类:</label> <select name="country" class="country">    
  3. <option selected="selected">--Select--</option>    
  4. <?php    
  5. include('../../conn.php');    
  6. $sql=mysql_query("select * from bigclass");    
  7. while($row=mysql_fetch_array($sql))    
  8. {    
  9. $id=$row['bigclassid'];    
  10. $data=$row['bigclassname'];    
  11. echo '<option value="'.$id.'">'.$data.'</option>';    
  12.  } ?>    
  13. </select> <br/><br/>    
  14. <label>小类 :</label>     
  15. <select name="city" class="city">    
  16. <option selected="selected">--Select--</option>    
  17. </select>    
  18. </div>  

ajax.php

PHP Code

  1. <?php    
  2. include('conn.php');    
  3. if($_POST['id'])    
  4. {    
  5. $id=$_POST['id'];    
  6. $sql=mysql_query("select * from smallclass where bigclassid='$id'");    
  7.     
  8. while($row=mysql_fetch_array($sql))    
  9. {    
  10. $id=$row['smallclassid'];    
  11. $data=$row['smallclassname'];    
  12. echo '<option value="'.$id.'">'.$data.'</option>';    
  13.     
  14. }    
  15. }  
  16. ?>   

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

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

代码要点：

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

  1. $("筛选符").append("<option value='隐藏值'>显示文字</option>")  

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

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

或者是:

  1. $(".child").empty()  

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

  1. $(".parent").val()  

下面是示例JSP页面全文：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. <meta http-equiv="pragma" content="no-cache"/>  
  7. <meta http-equiv="cache-control" content="no-cache"/>  
  8. <meta http-equiv="expires" content="0"/>  
  9. <title>基于JQuery的下拉框级联操作</title>  
  10. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>  
  11. <script type="text/javascript">  
  12. function changChild(tid){  
  13.     $.post("childSelect",{"tid":tid},function(json){  
  14.         $(".child").html("");//清空学生下拉框  
  15.         for(var i=0;i<json.length;i++){  
  16.             //添加一个学生  
  17.             $(".child").append("<option value='"+json[i].id+"'>"+json[i].name+"</option>");  
  18.         }  
  19.     },'json');  
  20. }  
  21. $(function(){  
  22.     //初始化教师下拉框  
  23.     $.post("parentSelect",null,function(json){  
  24.         for(var i=0;i<json.length;i++){  
  25.             //添加一个教师  
  26.             $(".parent").append("<option value='"+json[i].id+"'>"+json[i].name+"</option>");  
  27.         }  
  28.         changChild($(".parent").val());  
  29.     },'json');  
  30.     //注册教师下拉框事件  
  31.     $(".parent").change(function(){  
  32.         changChild($(this).val());  
  33.     });  
  34. });  
  35. </script>  
  36. </head>  
  37. <body>  
  38. <h3>使用JQuery进行下拉框的联动</h3>  
  39. <p>  
  40.     改变教师下拉框，发送AJAX请求，根据返回的JSON数据重新填充学生下拉框。  
  41. </p>  
  42. <hr/>  
  43. <select class="parent"></select>  
  44. <select class="child"></select>  
  45. </body>  
  46. </html>  

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

  1. public class SelectChangeAction {  
  2.     private static List<Teacher> teachers = new ArrayList<Teacher>();  
  3.     private static List<Student> students = new ArrayList<Student>();  
  4.     private int tid;  
  5.     static{  
  6.         Teacher teacher = null;   
  7.         Student student = null;  
  8.         for(int i=0;i<10;i++){  
  9.             teacher = new Teacher();  
  10.             teacher.setId(i);  
  11.             teacher.setName("教师【"+i+"】");  
  12.             for(int j=0;j<10;j++){  
  13.                 student = new Student();  
  14.                 student.setId(j);  
  15.                 student.setName(teacher.getName()+"的学生【"+i+"|"+j+"】");  
  16.                 student.setTeacher(teacher);  
  17.                 students.add(student);  
  18.             }  
  19.             teachers.add(teacher);  
  20.         }  
  21.     }  
  22.       
  23.     /** 
  24.      * 输出教师信息 
  25.      * @return 
  26.      */  
  27.     public String parent(){  
  28.         String json = JSONArray.fromObject(teachers).toString();  
  29.         HttpServletResponse response = ServletActionContext.getResponse();  
  30.         response.setCharacterEncoding("UTF-8");  
  31.         try {  
  32.             response.getWriter().write(json);  
  33.         } catch (IOException e) {  
  34.             e.printStackTrace();  
  35.         }  
  36.         return null;  
  37.     }  
  38.     /** 
  39.      * 输出学生信息 
  40.      * @return 
  41.      */  
  42.     public String child(){  
  43.         List<Student> list = new ArrayList<Student>();  
  44.         for (Student student : students) {  
  45.             if(student.getTeacher().getId() == tid){  
  46.                 list.add(student);  
  47.             }  
  48.         }  
  49.         String json = JSONArray.fromObject(list).toString();  
  50.         HttpServletResponse response = ServletActionContext.getResponse();  
  51.         response.setCharacterEncoding("UTF-8");  
  52.         try {  
  53.             response.getWriter().write(json);  
  54.         } catch (IOException e) {  
  55.             e.printStackTrace();  
  56.         }  
  57.         return null;  
  58.     }  
  59.     public int getTid() {  
  60.         return tid;  
  61.     }  
  62.     public void setTid(int tid) {  
  63.         this.tid = tid;  
  64.     }  
  65. }  
标签：

1 条留言  访客：1 条  博主：0 条

  1. benen005 2016年06月26日 上午 12:52  -199楼  回复

    确实不错

给我留言