提姆寫程式

0%

jQuery 筆記 - 使用 select 選取 option 的資料，並同步渲染於網頁

發表於 更新於 分類於 Disqus：
如何把 option 的選項與資料同步?

select

前言

主要紀錄這次工作上遇到的狀況，一開始想得太複雜了，但還好今天有解決，但在網路上找不到合適的筆記與範例，就把這個狀況記錄下來當作筆記。

狀況

要使用 select 當中有數個 option，當選擇到該 option 時，對應的資料要做呈現於網頁上，所以會有以下資訊：

  • select，option 標籤。
  • 要呈現的資料。
  • 使用 jQuery 控制，所以會使用 change 事件。

解法 1

我第一個想法是使用 select + option 來製作下拉選單，另外資料我是使用在選單下方呈現，所以程式碼會長這樣。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="wrap">
  <select name="s01" id="s01">
    <option value="0">--請選擇--</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <div class="show">
    <div class="show01">
      <img
        src="https://images.unsplash.com/photo-1552728089-57bdde30beb3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80"
        alt=""
      />
    </div>

    <div class="show02">
      <p>
        一定會天氣，書記出來天空並不據說破解一對只是，註冊時間三星檢驗事故正確實用是個激情之後我家植物一半一下子，整理大聲過去通過回事一句危機調查理想股份有限公司，中港路實驗審核暴力網頁課程，圖文之下先進教育否則，注意蔬菜信用，日月潭提供打擊奇蹟其他衣服能夠，請。
      </p>
    </div>
  </div>
</div>

這邊都算簡單，重點來了，我該怎麼讓資料在還沒選取到的時候先不要顯示呢?
我第一時間想到的是用 display:none;，結果後來就寫不下去了，後來受不了，趕緊請教資深工程師，很快速的點醒我的思路，原來是我想得太複雜，卻忘記了 JS 只能一次做一件事情的特性。

很重要所以說三次：

  • JS 只能一次做一件事情！
  • JS 只能一次做一件事情！
  • JS 只能一次做一件事情！

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
  //一開始所有資料都隱藏
  $(".show01").hide(); //第一個資料隱藏
  $(".show02").hide(); //第二個資料隱藏
  $("#s01").change(function(val) {
    //因為是 select 所以綁定 change 事件
    if ($("#s01").val() === "1") {
      //當 select 中 option 的值等於 1 時
      $(".show01").show(); //第一個資料顯示
      $(".show02").hide(); //第二個資料隱藏
    } else if ($("#s01").val() === "2") {
      //當 select 中 option 的值等於 2 時
      $(".show02").show(); //第二個資料顯示
      $(".show01").hide(); //第一個資料隱藏
    } else {
      //否則兩筆都隱藏
      $(".show01").hide();
      $(".show02").hide();
    }
  });
});

附上 codepen: https://codepen.io/hnzxewqw/pen/ZEGmEVW

解法 2

透過 CSS 新增 .active，再透過 jQuery 來動態控制 CSS，並且把 if 判斷是改成 switch，因為這樣在效能上可以提高！

HTML 不變， CSS 更動成下方所示：

1
2
3
4
5
6
7
.show01,
.show02 {
  display: none; //預設不顯示。
  &.active {
    display: block; //動態新增 .active 用 jQuery 控制顯示出來。
  }
}

因為透過 if、else if 判斷式很吃效能，目前範例只有兩個，倘若有 20 筆，可能會寫到崩潰，所以這邊也學到，資料少可以用 if，但資料多要使用 switch，這要具備的思維跟觀念！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
  $("#s01").change(function() {
    switch (
      $(this).val() //指到 select 自己的選項。
    ) {
      case "0": // 當選到 value 是 0 的時候，移除兩個 class。
        $(".show01").removeClass("active");
        $(".show02").removeClass("active");
        break;
      case "1": // 當選到 value 是 1 的時候，新增 .show01，移除 .show02。
        $(".show01").addClass("active");
        $(".show02").removeClass("active");
        break;
      case "2": // 當選到 value 是 2 的時候，新增 .show02，移除 .show01。
        $(".show02").addClass("active");
        $(".show01").removeClass("active");
        break;
      default:
        return;
    }
  });
});

當資料讀取完，就把所有的結果都跑完了，很棒的方法呢!!

學長補充說明：

  • 第一個是這種 show & hide 可以用 CSS 處理就不要用 JS，例如在 .show01 & .show02 CSS 可以先 display: none; 再設定一個 active
    class 處理 display: block; JS 的部分只要根據條件 addClass or removeClass 即可。這樣的好處是 browser 渲染會比較有效率，而且 jQuery 的 show & hide 是直接寫 inline style 在 HTML tag 上面，權重有點過高。

  • 第二是 JS 的 if else 可以嘗試用 switch 判斷會比較易讀一點。現在因為 option 只有兩個，到時候如果 option 一多例如有 20 個，用 if else 會寫到脫窗，而且難以維護，最後是善用 $(this)。因為 change event 已經綁定 $("#s01") 了，所以 function 內要 target $("#s01")的話用$(this) 即可，這樣寫比較不容易出現不可預期的錯誤。

codepen: https://codepen.io/hnzxewqw/pen/YzXRerX