在監聽事件中還有一個是 change 事件，這個功能經常可以在各大網頁中看到，比方說可以根據預算選出符合我們預算的產品，今天就一步一步的帶大家完成一個簡易的根據預算篩選出符合預算的汽車品牌吧！

本單元會把前面所學一次性的再度整合運用，前面的章節其實原理大概都知道但是要用在什麼地方就不太清楚，本章全部都會用到囉，讓我們開始吧！

根據預算選汽車品牌小工具

第一步先建立 HTML

<h2>根據預算可以買到的汽車品牌</h2>
    <select id="carmodel">
      <option value="100">100萬</option>
      <option value="200">200萬</option>
      <option value="300">300萬</option>
    </select>
<ul class="list"></ul>

第二步 開始寫JS

先建立一個物件的資料陣列，實務上都是去連接後端資料庫的資料或是網路上的 API，這邊做簡單的範例就自己寫一些簡單的內容：

// 車庫資料
var car =[
  {
    brand:"賓士",
    price:200
  },
  {
    brand:"寶馬",
    price:200
  },
  {
    brand:"馬自達",
    price:100
  },
  {
    brand:"豐田",
    price:100
  },
  {
    brand:"保時捷",
    price:300
  },
]

第三步-建立元素

要跟 HTML 做互動我們可以把會選取到的標籤先用變數存取，之後再呼叫變數來指定動作就好。

//選取元素並存成變數
var model = document.getElementById('carmodel');
var list = document.querySelector('.list');
var len = car.length;

第四步-監聽事件

在 model 這個元素上綁定一個 change 的事件，後面執行 updateList 函式

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

第五步-撰寫 updateList

這一步非常重要，透過迴圈去跑遍資料庫內的資料，並用判斷式去判別什麼資料要印出來，這邊判斷的邏輯就是如果 select 的值等於資料庫的 prcie 就累加到 str 內，後面再印在 list 這個標籤內。

//監聽後執行的程式 updateList
function updateList(e){
  var select = e.target.value;
  var str ="";
  //使用for迴圈去跑裡面的資料，並去判斷所需要的資料
  for(var i=0; i<len ; i++){
    if(select == car[i].price){
      str += '<li>'+car[i].brand+'</li>'
    }
  }
  list.innerHTML = str; //把字串寫到 list 內
}

最後完整範例程式碼

// 車庫資料
var car =[
  {
    brand:"賓士",
    price:200
  },
  {
    brand:"寶馬",
    price:200
  },
  {
    brand:"馬自達",
    price:100
  },
  {
    brand:"豐田",
    price:100
  },
  {
    brand:"保時捷",
    price:300
  },
]
//選取元素並存成變數
var model = document.getElementById('carmodel');
var list = document.querySelector('.list');
var len = car.length;

//事件監聽
model.addEventListener('change',updateList,false);

//監聽後執行的程式 updateList
function updateList(e){
  var select = e.target.value;
  var str ="";
  //使用for迴圈去跑裡面的資料，並去判斷所需要的資料
  for(var i=0; i<len ; i++){
    if(select == car[i].price){
      str += '<li>'+car[i].brand+'</li>'
    }
  }
  list.innerHTML = str;
}

不知道此系列到這邊，大家是否開始知道怎麼應用之前所學，來開發一些小工具了呢？
比方說 BMI 計算機或是計算薪水的網站等等的....這些程式的原理大概都知道了，但我想最難的就是怎麼運用所學把想做的功能運用邏輯去組織起來了，這就要多多練習了！

今天就帶大家做了一個簡易的篩選工具，明天再繼續分享其他的 JS 知識吧！