change - 表單內容更動內容時觸發

Posted on In

🎃 「<select></select>下拉式選單」的「事件」：選取不同的option，就會觸發「change 事件」

html:

🎃 <select></select>的id="areaId"

🎃 <ul></ul>裡面是「空值」

1
2
3
4
5
6
<select id="areaId">
    <option value="前鎮區">前鎮區</option>
    <option value="苓雅區">苓雅區</option>
</select>

<ul class="list"></ul>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var area = document.getElementById('areaId');
var list = document.querySelector('.list');

var county = [
    {
        farmer: '查理',
        place: '前鎮區'
    },
    {
        farmer: '卡斯伯',
        place: '苓雅區'
    },
    {
        farmer: '小花',
        place: '苓雅區'
    }
];

🎃 我要做的功能是：

  • 我在 <select></select>選擇「苓雅區」，在<ul></ul>裡面就會出現 「苓雅區的“農夫名字”」（用<li></li>列出來）
  • 我在 <select></select>選擇「前鎮區」，在<ul></ul>裡面就會出現 「前鎮區的“農夫名字”」（用<li></li>列出來）

JS 作法如下：

1️⃣ 在「<select></select>」做監聽事件

📖 [思考邏輯]：在規劃一個功能要怎麼實作時，先思考「要觸發的是哪種事件」–> 再去反推「觸發這個事件會執行什麼function」

🎃 要監聽的是「change 事件」–> 在<select></select>，當 user「變更“選取的資料”」時，就會觸發「change 事件」

🎃 當「change 事件」被觸發時，才會執行「updateList這個 function」

🍋 把function命名為updateList

1
2
// 在「下拉式選單」做監聽事件
area.addEventListener('change',updateList,false);

❓ 為什麼在「事件」裡面“執行 function”，不用在「function 後面加上小括號」呢？

原因為：在「事件」裡面，會「直接執行」function，因此，就不用在「function 後面加上小括號」

以上面的範例來說，在.addEventListener裡面
✅ 直接寫updateList即可
❌ 不需要寫updateList()

2️⃣ function updateList(e){}

🍋 在function帶入一個「參數e」

🍋 建立變數countyLen，來計算出「county陣列中，共有幾筆資料」：
var countyLen = county.length;

🎃 用e.target.value撈出「我選取到」的「元素的“value”值」： var select = e.target.value;

🍋 建立變數select，代表「我當下選擇的東西」，用e.target.value撈出「<select></select>」的“value”值

🎃 先建立變數str，做一個「空的字串」： var str = '';

🍋 等我用「for迴圈」把字串組好之後，再把「變數str」套到<li></li>裡面

1
2
3
4
5
6
var countyLen = county.length;

function updateList(e){
    var select = e.target.value;
    var str = '';
};

3️⃣ 在function updateList(e){}裡面跑「for迴圈」

if的條件

🎃 if的條件是：「在<select>，我當下選擇的value」如果跟「陣列中，該物件的place」相符，才可以把「該物件的farmer」列出來：

🍋 把「該物件的farmer」列出來，加到str的字串裡面

1
2
3
4
5
6
7
8
9
10
11
var countyLen = county.length;

function updateList(e){
    var select = e.target.value;
    var str = '';
    for(var i=0;i<countyLen;i++){
        if(select == county[i].place){
            str += '<li>'+ county[i].farmer +'</li>'         
        }        
    }
};

4️⃣ 用.innerHTML將字串帶到<ul></ul>裡面

🎃 跑完「for迴圈」之後，字串就組好了–> 就可以用.innerHTML將字串帶到<ul></ul>裡面

1
2
3
4
5
6
7
8
9
10
11
12
13
var countyLen = county.length;

function updateList(e){
    var select = e.target.value;
    var str = '';
    for(var i=0;i<countyLen;i++){
        if(select == county[i].place){
            str += '<li>'+ county[i].farmer +'</li>'         
        }        
    }

    list.innerHTML = str;
};

程式碼寫完了，結果如下：

✅ 我在 <select></select>選擇「苓雅區」，在<ul></ul>裡面就會出現 「苓雅區的“農夫名字”」（用<li></li>列出來）

✅ 我在 <select></select>選擇「前鎮區」，在<ul></ul>裡面就會出現 「前鎮區的“農夫名字”」（用<li></li>列出來）

完整程式碼

html:

1
2
3
4
5
6
<select id="areaId">
    <option value="前鎮區">前鎮區</option>
    <option value="苓雅區">苓雅區</option>
</select>

<ul class="list"></ul>

JS:

[程式邏輯]

1️⃣ 觸發「change事件」，就會執行「updateList這個 function」

2️⃣ 把當下在<select>選擇的「value值」，記錄在「變數select」

3️⃣ if條件：把「我選擇的value值」去跟「for迴圈跑出來的place」做比對

✅ 條件有符合，再把字串組到「變數str」裡面
❌ 條件不符合，就不會把farmer組到「變數str」裡面

4️⃣ 跑完「for迴圈」，就組好「變數str」的字串了，就可以帶到.list裡面

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
var area = document.getElementById('areaId');
var list = document.querySelector('.list');

var county = [
    {
        farmer: '查理',
        place: '前鎮區'
    },
    {
        farmer: '卡斯伯',
        place: '苓雅區'
    },
    {
        farmer: '小花',
        place: '苓雅區'
    }
];


var countyLen = county.length;

function updateList(e){
    var select = e.target.value;
    var str = '';
    for(var i=0;i<countyLen;i++){
        if(select == county[i].place){
            str += '<li>'+ county[i].farmer +'</li>'         
        }        
    }

    list.innerHTML = str;
};

// 在「下拉式選單」做監聽事件
area.addEventListener('change',updateList,false);

我的 codepen 範例

https://codepen.io/saffranwang/full/dyPVvvz