基于JQuery的Select下拉框下拉框联动（级联）

最新推荐文章于 2024-06-06 16:04:16 发布
最新推荐文章于 2024-06-06 16:04:16 发布
阅读量1.9w 收藏 12
点赞数
分类专栏： jquery

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

代码要点：

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

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

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

Js代码   收藏代码
  1. $(".child").html("")  

    或者是

Java代码   收藏代码
  1. $(".child").empty()  

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

Java代码   收藏代码
  1. $(".parent").val()  

下面是示例JSP页面全文：

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

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

Java代码   收藏代码
  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. } 
文斌a
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery实现下拉框联动
李维斯的博客
05-22 1290
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ...
select-tree:一个轻量级的 jQuery 插件来创建一个可选择的树（列表）
06-21
选择树 一个轻量级的 jQuery 插件来创建一个可选择的树（列表）。
jquery复选框选中及下拉框选中指定项(删除项)
bingliang514csdn的博客
11-20 807
jquery复选框选中及下拉框选中指定项(删除项)
若依vue下拉框选择的值联动问题
最新发布
m0_60649149的博客
06-06 330
这里只有员工状态选择试用的话，下面这个试用期才会展示下面这个就不会展示了。
JQuery打造下拉框联动效果
且行且码且思且娱
05-18 1674
做联动效果，若是用纯JavaScript来做，往往需要辅助页面保存需要刷新的结果集，然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后，当前一个下拉框onchange后，同级的后面的下拉框全部清除，然后重新拼接刷新的内容。用JQuery实现比较容易，代码以省市联动效果为例实现。 JSP页面代码如下： 生源地: 全部 ${pr
如何通过jQuery实现select下拉框的联动效果
Big Smile
12-10 2万+
由于项目需要，小编需要实现三个HTML的select下拉框联动的效果，如果考虑到实际用户体验的话，直接用异步刷新的方式操作DOM是最好的选择，这里小编直接使用了jQuery作为DOM操作的工具，直接操作，完成了对于下拉框的操作，下面是实现方法： 一、页面效果         如图，有这么两个下拉框，当选择上面的类型的时候，下面的动物种类就会跟着去变化： 这里是牛的分类这里是羊
jQuery制作简洁的多级联动Select下拉框
12-11
今天我们要来分享一款很实用的jQuery插件，它是一个基于jQuery多级联动的省市地区Select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个Select下拉框也...
JQuery实现级联下拉框效果实例讲解
11-22
用JQuery和select来实现汽车厂商和汽车类型的联动，参考过程如下 效果图：   逻辑分析图： html代码： <!DOCTYPE ...
jQuery多级联动美化版Select下拉框插件.zip
11-06
《jQuery多级联动美化版Select下拉框插件详解》 在Web开发中，我们经常需要处理复杂的表单，特别是涉及到多级联动选择时，如省份-城市-区县的选择，这种需求使得用户界面需要更加友好和高效。jQuery作为一款强大的...
layui-级联下拉框-可配置开启多选-HTML源码
10-02
级联下拉框是一种常见的UI组件，它允许用户在一个下拉框的选择基础上动态加载并显示另一个相关的下拉框，这种联动效果在数据筛选、地区选择等场景中非常常见。 1. HTML基础： HTML（HyperText Markup Language）...
jQuery ajax 多级联动 下拉框 Demo
08-06
casObjId: ['SelProvince', 'SelCity', 'SelArea', 'SelXian'], // 级联下拉框id casDefVal: ['全国', 5, '益阳', 22], // 级联默认值(Id,Name都可以) }); }); html： <h2> 省级联动 <select id=...
jquery select change事件_jQuery实现省市联动效果
weixin_39702559的博客
11-29 164
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select name="province"id="province"> <option &...
jquery操作select(取值，设置选中）
热门推荐
彭香香的专栏
04-07 110万+
<br />每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。<br />比如<select class="selector"></select><br />1、设置value为pxx的项选中<br />     $(".selector").val("pxx");<br />2、设置text为pxx的项选中<br />    $(".selector").find("option[text='pxx']").attr("selected",true);<br />   
jquery中select标签级联问题
John的博客
01-20 329
关于多级联动中，获取前后节点中值的方法总结： jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素，不限于父元素 jQuery.children(expr)        //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙 jQuery.contents() 
jQuery实现select级联
weixin_34395205的博客
09-11 130
使用Html5的数据属性(data-*)Map级联关系，代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Select级联</title> 5 <script src="https://code.jquery.com/jquery-1.1...
基于JQuery的Select级联
ThisTimed的专栏
01-27 740
$(document).ready(function(){ $("#precinct").change(function(){ $("#ptype").val("");//重置所有 $("#stype").html(""); $("#stype").append("--请选择--"); }); //监听专利类型change时间 $("#p
select设置选中项/select的级联
09-10 487
一、selected="selected" HTML通过<select>的属性来设置选中项， 此方法也可以在动态语言在后台根据需要控制输出结果。 <select ID='sel' class="form-control width150"> <option value="1">开启</option> <opt...
jquery select 的那些事儿
江湖再见
06-12 906
jQuery获取Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
JQuery Select下拉框联动
qq_36459934的博客
10-15 485
//省 $("#Provinces").change(function () { var id = $("#Provinces").val(); $.ajax({ type: "post", url: "/xxx/xxx", data: { "id": id}, dataType: "json", success: function (data) { .
jquery的select下拉框样式
12-20
jQuery提供了丰富的方法来定制select下拉框的样式。通过使用jQuery，我们可以轻松地改变下拉框的外观和行为。 首先，可以使用css()方法来修改下拉框的样式，比如改变背景色、字体、边框等。例如： ```javascript $("select").css("background-color", "lightblue"); $("select").css("border", "1px solid #ccc"); ``` 其次，还可以使用addClass()和removeClass()方法来添加和移除样式类，从而改变下拉框的样式。例如： ```javascript $("select").addClass("custom-select"); $("select").removeClass("default-select"); ``` 此外，还可以使用插件如select2来增强select下拉框的样式和功能。select2是一个十分流行的jQuery插件，它可以让下拉框变得更加美观和交互更加友好。 最后，通过事件监听方法，还可以在选择下拉框选项时改变其样式。例如，在change事件中修改选中项的样式： ```javascript $("select").on("change", function(){ $(this).css("color", "red"); }); ``` 总之，利用jQuery可以方便地对select下拉框进行样式定制，使其与网页设计更加协调和美观。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值