# 8. change - 表單內容更動內容時觸發

- 要製作一個觸發 change event 的功能 - 通常會搭載 HTML 的下拉式選單：
select、option

- HTML 範例：

    <h1>苗栗縣市居住人員清單</h1>
    <select id="menu">
        <option value="頭份市">頭份市</option>
        <option value="竹南鎮">竹南鎮</option>
        <option value="苗栗市">苗栗市</option>
    </select>


// 實現資料內容呈現：
    <ul class="list">
    
    </ul>

- JavaScript:

// 陣列資料

var country = [
    {
        farmer: 'Wilson',
        place: '頭份市'
    },
    {
        farmer: 'Yoku',
        place: '頭份市'
    },
    {
        farmer: 'Sherry',
        place: '竹南鎮'
    },
    {
        farmer: 'jack',
        place: '苗栗市'
    }
];

// 指定到 ul 
var list = document.querySelector('.list');

// 指定到 選單
var menuchange = document.querySelector('#menu');

// 陣列回圈
var data = country.length;

### 如何撰寫 change 事件：

1. 宣告 select = e.target.value // 表示當使用者切換選項時，當下的對應內容 - value

2. str = '' // 作為字串組合的保留

3. 執行 for 迴圈，if條件：

- 當 select == 資料的區域時，組字串：

str += '<li>' + country[i].farmer + '</li>';

4. 將組好的字串套用到 list 並且使用 innerHTML 的方式！

### 完整ＪＳ解答：

// change 事件

function updateList(e) {
    var select = e.target.value;
    var str = ''; // 保留字串
    for (var i = 0; i < data; i++) {
        if (select == country[i].place) {
            str += '<li>' + country[i].farmer + '</li>';
        }
        list.innerHTML = str;
    }
}

menuchange.addEventListener('change', updateList, false);

###### tags: `JavaScript - event 事件`