JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » Servlet/JSP 討論區  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友   
reply to postflat modego to previous topicgo to next topic
本主題所含的標籤
作者 如何造 - JSP動態下拉式選單 plain text 版
roytsang





發文: 620
積分: 1
於 2011-10-20 18:12 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
看見這裡久不久就有人問這個問題,今天小弟獻醜了,老實說其實不難,
只要google 一下(keyword 打ajax jsp drop down)和花點時間去試試就可以啦,
一點也不難,我這些code很多都從google找回來的。

言歸正傳,首先介紹一下什麼動態下拉式選單, 說穿了就user 在第一個下拉式選單點了選項之後,
第二個選單的內容跟隨著user在第一個選單所點選的東西而改變。

如何造到呢,流程如下:

1)user 在第一個下拉式選單點了選項之後
2)trigger 了onchange event
3)然後在event handler 裡面讀取user 所選的值
4)用ajax 將value 丟去server side 程式
5)server side 程式讀取value,從database 選取相應的資料
6)將資料送回給client side
7)client side 根據收到的資料改變第二個選單的內容

好像有點抽象,不緊要先看code吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
  <head>
    <title>JSP動態下拉式選單示範</title>
    <META http-equiv="Content-Type" content="text/html; charset=big5">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script language=javascript>
      function updateData(v)
      {
        var value=v.options[v.selectedIndex].value;
        $("#number").empty(); //把'數字' drop down box 清空
        if (value!="") //真的選了選項才丟去server side
        {
          jQuery.post("getResult.jsp","type="+value,updateNumber);
        }
      }
      function updateNumber(data)
      {
        var numberData=jQuery.trim(data).split("\n");//用 \n 來做分資料分割
        var number=document.getElementById("number");
        for (i=0;i<numberData.length;i++)
        {
          value=numberData[i].split("-")[0];//用 - 來做分資料分割取出value 
          text=numberData[i].split("-")[1]; //用 - 來做分資料分割取出text
          option=new Option(text,value);    //用這樣的方法 IE 才會work  
          number.options[i]=option;         //
        }
      }
    </script>
  </head>
  <body>
 
    <h1>JSP動態下拉式選單示範</h1>
    數字類型
    <select id=type name="type" onchange="updateData(this)">
      <option value="">請選擇</option>
      <option value="1">單數</option>
      <option value="0">雙數</option>
    </select>
 
    數字
    <select id="number" name="number">
    </select>
  </body>
</html>    

這個示範程式是當user 在第一個選單選數字類型之後,在第二個選單顯示相應數字。
之前提過AJAX, 有關介紹可以上網找一下就會有好多很好的介紹,我不在此贅述了,
主要是在不refresh 版面情況向server side submit request並收回server side 的回應,這次我用
了jQuery這個javascript lib. 來幫我處理一些事情,如改變 ui 和ajax, 因為她可以幫我處理
不同browser 不兼容的情況,現在做web application 真是要用這些lib. 為我們省下不少時間。
要引用jQuery lib,最好要在<head></head> 加入這句
1
<script src="http://code.jquery.com/jquery-latest.js"></script>


如果您已經download了jquery lib., 您就要改成這樣
1
<script src="Path to your jquery .js file"></script>


之前提過什麼onchange event, 什麼event handler,大家可以看看第34行,
1
<select id=type name="type" onchange="updateData(this)">


這句意思是create 一個選單,當user 點了選項之後(即onchange event),就call updateData
,而updateData 這個function 就是所謂event handler,至於這個parameter 'this',
即是將這個選單 object 交給這個function,
透過以下的code 讀取user 選了什麼
1
var value=v.options[v.selectedIndex].value;


此處v 為代表第一個選單物件

最後,用jQuery.post 這個function 將資料送到server side 去,
根據這裡說:
http://api.jquery.com/jQuery.post/

1
jQuery.post("getResult.jsp","type="+value,updateNumber);

jQuery.post 的
第一個參數是server side 程式/page 的名稱
第二個參數是丟去server side 的name,value mapping
第三個參數是處理server side response 的function 名稱

因為用post method沒有資料長度限制,其實用get method 都可以的

再來看server side 程式(getResult.jsp)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="big5"%>
<%  String type=request.getParameter("type");
  int i;
  if (type!=null)
  {
    if (type.equals("1")) //單數
    {
      out.println("1-一");//因為用戶端會用 \n 來做分資料分割所以一定要ends with \n
      out.println("3-三");//因為用戶端會用 \n 來做分資料分割所以一定要ends with \n
      out.println("5-五");//因為用戶端會用 \n 來做分資料分割所以一定要ends with \n
      out.println("7-七");//因為用戶端會用 \n 來做分資料分割所以一定要ends with \n
    }
    else
    {
      if (type.equals("0")) //雙數
      {
        out.println("2-二");//因為用戶端會用 \n 來做分資料分割所以一定要ends with \n
        out.println("4-四");//因為用戶端會用 \n 來做分資料分割所以一定要ends with \n
        out.println("6-六");//因為用戶端會用 \n 來做分資料分割所以一定要ends with \n
        out.println("8-八");//因為用戶端會用 \n 來做分資料分割所以一定要ends with \n
      }
    }
  }%>

由於是plain text,只是根據client side丟來的值輸出不同數字而已,沒有什麼特別。
要注意的是,pageEncoding 是提示我這個JSP 檔案的編碼是big 5 , 但輸出到browser 時
編碼卻是UTF-8(因為charset set了 UTF-8),傳回來data 樣子大概如下,

1-一
3-三
5-五
7-七

當browser 收到server response 之後就交給updateNumber(data) 這個function
,來處理餘下來的事情,要注意的是,因為IE 不兼容問題,所以第24,25行要這樣寫才
可以改變第二個選單的內容。

如何造 - JSP動態下拉式選單,大概就是這樣,希望大家喜歡。

ps:
我遲些時候會寫XML 版,希望大家支持


roytsang edited on 2014-11-28 13:53
reply to postreply to post
話題樹型展開
人氣 標題 作者 字數 發文時間
7340 如何造 - JSP動態下拉式選單 plain text 版 roytsang 4332 2011-10-20 18:12
» JWorld@TW »  Servlet/JSP 討論區

reply to postflat modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8