基於JQuery的Select下拉框下拉框聯動（級聯）
阿新 • • 發佈：2019-01-05
這段時間在指導學生完成實訓專案，由一個用到了JQuery進行下拉框（select）聯動（新增刪除option）的操作，本來在上課中都是講過的，但時間一長都忘光了，下面把這段簡單的JS貼出來，給入門者一個DEMO吧，以後有學生不會寫的時候他能到這找到參考。
程式碼要點：
1、使用JQuery給select標籤新增option元素時，直接使用：
Js程式碼
- $("篩選符").append("<option value='隱藏值'>顯示文字</option>")
2、清空select中所有元素可以使用：
Js程式碼
- $(".child").html("")
或者是
Java程式碼
- $(".child").empty()
3、獲取select標籤選擇值時用：（直呼叫val()方法即可）
Java程式碼
- $(".parent").val()
下面是示例JSP頁面全文：
Js程式碼
- <%@ 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字串：（見全文）
Java程式碼
- publicclass SelectChangeAction {
- privatestatic List<Teacher> teachers = new ArrayList<Teacher>();
- privatestatic List<Student> students = new ArrayList<Student>();
- privateint 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();
- }
- returnnull;
- }
- /**
- * 輸出學生資訊
- * @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();
- }
- returnnull;
- }
- publicint getTid() {
- return tid;
- }
- publicvoid setTid(int tid) {
- this.tid = tid;
- }
- }