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

» JWorld@TW » Servlet/JSP 討論區  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友   
reply to postflat modego to previous topicgo to next topic
本主題所含的標籤
無標籤
作者 Re:[問題]即時多層下拉選單 [Re:ㄚ孝]
AdaHsu





發文: 25
積分: 0
於 2004-04-19 12:23 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
即時多層下拉選單的概念要從兩層談起,並且配合 JavaScript 的語法後才會比較清楚。

※ 註:原文的目標是選取國別 or 城市名後,再向資料庫讀取城市 or 鄉鎮的資料,這樣的話就配合 onChange 自行觸動 form.submit() 回 Server 端重新讀取相關資料即可,並不困難。但是傳輸的成本和資料量的多寡就必須加以評量。並不是 Client 端立即反應就比較好 ( 如果第一頁產生出來要等個 5 分鐘,那就不要做下面介紹的方法,直接 submit 回 Server 重新讀取少量資料即可) 。

1. 選單物件 <select> 中包含的選項資訊 <option> 是一個陣列物件,因此只要修改該陣列的長度即可動態調整選項內容。
1
2
3
4
5
6
  select.options.length = 0; // 移除所有選項
  select.options.length = 4; // 設定有四個選項
  select.options[0] = '台北';
  select.options[1] = '台中';
  select.options[2] = '台南';
  select.options[3] = '高雄';


2. 在 HTML Object 中可以捕捉不少種事件,為了讓下拉選單的指定項目改變時即觸發相關的作業,我們需要指定 onChange 的事件捕捉程序,方式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
  <script>
      function doNewCountry( obj ) {
        alert( '您變更國家為:' + obj.value );
      }
  </script>
 
  <body>
    <select name="country" onChange="doNewCountry( this );">
        <option value="Taiwan">台灣</option>
        <option value="Hongkong">香港</option>
        <option value="I don't Know">澳門</option>
        <option value="China">中國</option>
     </select>
   </body>
</html>


3. 如果需要將資料全部放到頁面中時,則 JavaScript 中可以使用多維陣列,用法與 Java 很像,只要 new 出來就好,如下例:
1
2
3
var A = new Array();
A[0] = new Array();
A[0][0] = new Array();


4. 整合上述的基本資訊後,可以得到這樣一個流程:

1
2
  a. 當使用者變更了第一個選單內的項目後,就透過 onChange 事件指定的副程序去變更第二個選單內的資料。
  b. 變更第二個選單內的資料的作業是先將第二個選單內的資料清空後,再把新的選項內容填入 


範例如下:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
 
  <script>
 
    // 通常,當資料選項的變動性不大時,都會直接寫成 .js 檔含入即可。
 
    var country = new Array();          // 看幾個國家
    country[0] = '台灣';
    country[1] = '中國';
    country[2] = '日本';
 
    var city = new Array();
    city[0] = new Array();    // 台灣的城市
    city[0][0] = '台北';
    city[0][1] = '台中';
    city[0][2] = '台南';
    city[0][3] = '台高';
 
    city[1] = new Array();    // 中國的城市
    city[1][0] = '北京';
    city[1][1] = '上海';
    city[1][2] = '南京';
 
    city[2] = new Array();    // 日本的城市
    city[2][0] = '東京';
    city[2][1] = '名古屋';
 
  
    // 載入 master 選單,同時初始化 detail 選單內容
    function loadMaster( master, detail ) {
 
      master.options.length = country.length;
      for( i = 0; i < country.length; i++ ) {
        master.options[ i ] = new Option( country[i], country[i] );  // Option( text , value );
      }
 
      master.selectedIndex = 0;
      doNewMaster( master, detail );
    }
 
    // 當 master 選單異動時,變更 detail 選單內容
    function doNewMaster( master, detail ) {
    
      detail.options.length = city[ master.selectedIndex ].length;
      for( i = 0; i < city[ master.selectedIndex ].length; i++ ) {
        detail.options[ i ] = new Option( city[ master.selectedIndex ][ i ],
                                          city[ master.selectedIndex ][ i ] );
      }
    }
 
  </script>
 
  <body onload="loadMaster( document.getElementById( 'country' ), 
                            document.getElementById( 'city' ) );">
    <select name="country" id="country" 
        onChange="doNewMaster( document.getElementById( 'country' ), 
                               document.getElementById( 'city' ) );">
   </select>
   <select name="city" id="city">
   </select>
   </body>
</html>


5. 若是三層的選單呢?原理不變,主要是多一組陣列以記錄第三組選項內容,且新增第二組選單的 onChange 事件處理程序以便切換第三組選項,但老實說印象中只遇過一次這種特殊狀況,但我忘了實際的情形是怎樣了... :p 而且此時產生陣列的時間會拉長。

6. 通常我只會產生 city 陣列,country 內的選項則直接寫到 HTML 中,因為它不會改變。


AdaHsu edited on 2004-04-19 17:56
reply to postreply to post
話題樹型展開
人氣 標題 作者 字數 發文時間
81023 [精華] [問題]即時多層下拉選單 ㄚ孝 384 2003-06-07 09:05
78207 Re:[問題]即時多層下拉選單 browser 1054 2003-06-07 18:19
75144 Re:[問題]即時多層下拉選單 x3711699 138 2004-04-08 20:41
74957 Re:[問題]即時多層下拉選單 alanting 710 2004-04-11 01:41
78186 Re:[問題]即時多層下拉選單 AdaHsu 3345 2004-04-19 12:23
76060 Re:[問題]即時多層下拉選單 tsechun 95 2004-04-21 02:01
73220 Re:[問題]即時多層下拉選單 andowson 474 2004-08-01 11:07
72950 Re:[問題]即時多層下拉選單 yingssu 663 2004-08-01 19:48
72022 Re:[問題]即時多層下拉選單 ting626 38 2004-08-25 16:57
72087 Re:[問題]即時多層下拉選單 i22616899 2298 2004-09-04 17:55
71278 Re:[問題]即時多層下拉選單 GuanChih 175 2004-09-05 18:51
72012 Re:[問題]即時多層下拉選單 jonz 873 2004-09-12 10:27
65263 Re:[問題]即時多層下拉選單 pulse 1193 2005-04-18 23:22
69070 Re:[問題]即時多層下拉選單 joshua 1019 2004-11-17 16:02
69391 Re:[問題]即時多層下拉選單 joshua 2357 2004-11-17 17:27
75653 Re:[問題]即時多層下拉選單 ㄚ孝 61 2003-06-09 08:34
75877 Re:[問題]即時多層下拉選單 browser 135 2003-06-09 09:23
68101 Re:[問題]即時多層下拉選單 Madagascar 141 2004-12-04 02:06
67915 Re:[問題]即時多層下拉選單 yannru 360 2004-12-07 16:19
67779 Re:[問題]即時多層下拉選單 Madagascar 465 2004-12-07 21:20
67771 Re:[問題]即時多層下拉選單 small3 388 2004-12-13 09:52
68156 Re:[問題]即時多層下拉選單 EPHT 3599 2004-12-18 09:45
55535 Re:[問題]即時多層下拉選單 yulie 2015 2006-06-06 12:47
55253 Re:[問題]即時多層下拉選單 yulie 102 2006-06-06 13:21
55528 Re:[問題]即時多層下拉選單 estrelas 1620 2006-06-06 18:51
46320 Re:[問題]即時多層下拉選單 minichitina 1875 2007-05-05 16:25
46212 Re:[問題]即時多層下拉選單 eidson72 4781 2007-05-16 11:48
21109 Re:[問題]即時多層下拉選單 catte 1960 2011-06-27 14:44
21001 Re:[問題]即時多層下拉選單 bernardvai 54 2011-06-27 16:56
45793 Re:[問題]即時多層下拉選單 alvin0224 309 2007-05-16 14:54
45870 Re:[問題]即時多層下拉選單 eidson72 21 2007-05-16 15:41
75467 Re:[問題]即時多層下拉選單 ㄚ孝 75 2003-06-09 14:05
75431 Re:[問題]即時多層下拉選單 jackyliu 201 2003-06-22 02:06
45323 Re:[問題]即時多層下拉選單 minichitina 188 2007-05-31 08:33
45183 Re:[問題]即時多層下拉選單 minichitina 2335 2007-06-04 08:04
45652 Re:[問題]即時多層下拉選單 minichitina 2718 2007-06-07 08:00
21108 Re:[問題]即時多層下拉選單 catte 2014 2011-06-28 03:14
20964 Re:[問題]即時多層下拉選單 bernardvai 1202 2011-06-28 09:54
21074 Re:[問題]即時多層下拉選單 catte 2970 2011-06-28 11:36
20939 Re:[問題]即時多層下拉選單 bernardvai 545 2011-06-28 14:21
21026 Re:[問題]即時多層下拉選單 catte 146 2011-06-28 17:54
20953 Re:[問題]即時多層下拉選單 bernardvai 2904 2011-06-29 09:58
20904 Re:[問題]即時多層下拉選單 catte 43 2011-06-29 21:58
20791 Re:[問題]即時多層下拉選單 bernardvai 219 2011-06-30 14:40
20602 Re:[問題]即時多層下拉選單 catte 269 2011-07-13 10:41
20684 Re:[問題]即時多層下拉選單 bernardvai 660 2011-07-13 11:34
20099 Re:[問題]即時多層下拉選單 catte 4035 2011-08-15 09:35
20323 Re:[問題]即時多層下拉選單 jk47 288 2011-08-15 11:19
75405 Re:[問題]即時多層下拉選單 mousetail 89 2003-06-22 13:06
77037 Re:[問題]即時多層下拉選單 alanting 1777 2003-06-22 23:21
75567 Re:[問題]即時多層下拉選單 alanting 87 2003-06-22 23:24
21226 Re:[問題]即時多層下拉選單 catte 54 2011-06-27 04:33
74982 Re:[問題]即時多層下拉選單 evenlin 132 2003-08-02 00:55
77129 Re:[問題]即時多層下拉選單 anthonycs 301 2003-08-02 15:43
74621 Re:[問題]即時多層下拉選單 ajax0953 232 2004-03-31 15:05
74368 Re:[問題]即時多層下拉選單 shyan68 261 2004-04-07 18:11
72811 Re:[問題]即時多層下拉選單 yafeng 122 2004-07-29 10:53
68251 Re:[問題]即時多層下拉選單 javaer 216 2004-12-20 00:40
» 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