XML Technology Research Lab: Dynamic HTML (III)

Dynamic HTML (III)

範例：同時利用 DOM 以及 CSS 來動態呈現選項的結果。在實務上，我們經常會依照使用者選擇的結果，來呈現某些特定的結果。例如，在本範例中，使用者可以選擇"高雄"（我出生以及成長的地方）或者"台中"（我回台之後工作的城市），然後程式會依照使用者選擇的都市來顯示該都市的行政區域。 請注意： 這個作法其實不是很好，因為載入網頁的時候，我們必須先把所有的選項資料都載入，這容易造成不必要的資料傳送，而且資料的維護上也比較不方便，我們建議採用 Ajax 的方式進行，這個範例只是用來展現 DOM 和 CSS 合用下可以完成的工作範例。

原始碼：

<script language="javascript">

  function display(str) {
    if(str == '--') {
      document.getElementById('label').className = "off";
      document.myform.ks.className = "off";
      document.myform.chung.className = "off";
    } else {
      document.getElementById('label').className = "on";
      if(str == '高雄') {
        alert(str);
        document.myform.ks.className = "on";
        document.myform.chung.className = "off";
      } else {
        document.myform.ks.className = "off";
        document.myform.chung.className = "on";
      }
    }
  }

</script>

說明：

首先，我們說明 form 元件的設計方式，其原始碼如下：
```
01  <form name="myform">
02  城市：
03  <select name="city"
04          onChange="display(document.myform.city.options[selectedIndex].text);">
05  <option value="none" selected="1">--</option>
06  <option value="ks">高雄</option>
07  <option value="chung">台中</option>
08  </select><br/>
09  <div id="label" class="off">行政區：</div>
10  <select name="ks" class="off">
11  <option value="1" selected="1">苓雅區</option>
12  <option value="2">三民區</option>
13  <option value="3">新興區</option>
14  </select>
15  <select name="chung" class="off">
16  <option value="1" selected="1">中區</option>
17  <option value="2">北屯區</option>
18  <option value="3">南區</option>
19  <option value="4">北屯區</option>
20  </select>
21  </form>
```
跟之前的範例相同，我們把 form 元件命名為 myform。這個 form 主要由三個下拉式選單所組成，第一個是第 03 到 08 行組成的，主要用來讓使用者選擇都市；第二個選單（第 10 到 14 行）以及第三個選單（第 15 到 20 行）分別用來代表高雄以及台中的行政區域。雖然定義了三個下拉式選單，但是一開始只需要呈現第一個選單，其他兩個選單不需要出現。為了達成這個目的，我們定義了如下的 CSS 樣式：
```
<style type="text/css">
  .off { display: none }
  .on  { display: inline }
</style>
```
我們利用 CSS 的 display: none 來隱藏下拉式選單；如果需要該元件顯示出來，我們可以將其值動態的改成 display: inline 即可。由於 .off 代表隱藏，所以在第 09、10、以及 15 行的元件中，我們都設定了 class=off 來隱藏標籤以及選單。
除了 form 被命名為 myform 之外，城市的下拉式選單被命名為 city、高雄的區域選單被命名為 ks，台中的區域選單被命名為 chung，而行政區標籤被命名為 label。有了這些名稱的設定，我們就可以 document.myform.ks 很輕易的取得高雄行政區域選單。
如第 03 和 04 行所示，下拉式選單的事件為 onChange；也就是下拉式選單只要一改變，便會觸發 onChange 事件。這樣的設計可以使得一旦使用者選完了都市之後，便立刻執行 display() 函數。在執行 display() 之前，我們必須知道使用者究竟選擇了哪一個選項（也就是都市）。為了解決這個問題， Javascript 定義了一個保留字 selectedIndex 來代表使用者選擇了哪一個選項，因此 options[selectedIndex].text 代表某個下拉式選單使用者所選擇的項目（option）的文字內容。若使用者在城市下拉式選單中（document.myform.city）選擇了高雄，那麼 document.myform.city.options[selectedIndex].text 的文字內容為 高雄。
從城市的下拉式選單中，我們可以看到，會傳到 display() 的參數值只可能有 --、高雄、或者台中。如果 display() 接收到的值是 --，則程式需要把 label、ks、和 chung 隱藏起來；若接收到的是 高雄，則程式需要把 label 和 ks 顯示出來，並把 chung 隱藏起來；若接收到的是 台中，則程式需要把 label 和 chung 顯示出來，並把 ks 隱藏起來。顯示或者隱藏元件的方式都是將該元件的 class 值做修正；例如，如果想把 label 的 class 值從 off 改成 on，則我們需要執行 document.getElementById('label').className = "off";；其中 document.getElementById('label') 會找到 id 為 label 的標籤，而修改 CSS 的 class selector 的屬性是 className。相同的，如果要將 ks 隱藏起來，我們需要執行 document.myform.ks.className = "off";。
在這個範例，目前還有一個不是很清楚的地方在於 div 的究竟應該使用 name 還是 id 的方式來命名。之前曾經試過利用 document.myform.label 來定位，label 也曾用過 name 和 id 來定義過，結果就是不行，只好使用 document.getElementById() 來定位。究竟 name 和 id 的使用要注意什麼，它們有什麼樣的差別，請參考 Difference between name= and id= 這篇文章。基本上，name 和 id 是歷史所造成的，也是廠商競爭所造成的，不同的瀏覽器會有不同的處理方式，因此我們碰到問題時可以參考規則書，另外就是利用不同的瀏覽器來測試你的網頁。依照 HTML 4.01 版的規格書，其定義 <div> 標籤只能出現 id 屬性，而沒有 name，而對於 id 的處理方式 Firefox 和 IE 卻不同，而兩者通用的方式是使用 document.getElementById()。

XML Technology Research Lab

2012年10月22日星期一

Dynamic HTML (III)

Dynamic HTML (III)

沒有留言:

張貼留言

2012年10月22日 星期一

Dynamic HTML (III)

Dynamic HTML (III)

沒有留言:

張貼留言

2012年10月22日星期一