0%

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

select

前言

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

狀況

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

  • selectoption 標籤。
  • 要呈現的資料。
  • 使用 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 控制顯示出來。
}
}

因為透過 ifelse 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