提姆寫程式

0%

JS 筆記 - 使用 select 選到該功能並執行其中內容

發表於 更新於 分類於 Disqus：
三種取選單內容的寫法

choose

這次要寫一個 select 選單，並選擇該功能後會對應到該功能。

建立選單

1
2
3
4
5
6
7
8
9
10
11
<label
  >Select:
  <select id="selectMode">
    <option value="1">option_01</option>
    <option value="2">option_02</option>
    <option value="3">option_03</option>
    <option value="4">option_04</option>
    <option value="5">option_05</option>
    <option value="6">option_06</option>
  </select>
</label>

JavaScript 寫法

首先要綁定 Select 選單，並給一個 change 事件。

1
2
let select = document.querySelector("#selectMode");
select.addEventListener("change", selectFun);

要執行的 function，將要取得的值這個動作寫在函式中，不然無法選到。

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
function selectFun() {
  const switchValue = select.options[select.selectedIndex].value;
  switch (switchValue) {
    case "1":
      option_01();
      break;
    case "2":
      option_02();
      break;
    case "3":
      option_03();
      break;
    case "4":
      option_04();
      break;
    case "5":
      option_05();
      break;
    case "6":
      option_06();
      break;
    default:
      return;
  }
}

對應的函式功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function option_01() {
  alert("選到 option_01");
}

function option_02() {
  alert("選到 option_02");
}

function option_03() {
  alert("選到 option_03");
}

function option_04() {
  alert("選到 option_04");
}

function option_05() {
  alert("選到 option_05");
}

function option_06() {
  alert("選到 option_06");
}

這樣就可以順利取到該功能的內容了，其中這一行程式碼可以有幾個寫法。

原生寫法

1
const switchValue = select.options[select.selectedIndex].value;

使用 this

1
const switchValue = this.value;

使用 jQuery

1
2
3
4
5
6
7
8
$("#selectMode").change(selectFun);

function selectFun(value) {
  let switchValue = $(this).val();
  switch (switchValue) {
    ...
  }
}

這時候真心覺得 this 跟 jQuery 真棒!

CodePen https://codepen.io/hnzxewqw/pen/jOWbjEe