本日小作品：
https://codepen.io/linchinhsuan/pen/OJXVgdo

重點摘要：

var city = [.......];
var sations = [[],[].......];

台灣每個縣市的資料和每個縣市的車站資料。

var cityBtn = document.querySelector(".city");
var areaBtn = document.getElementById("area");
for(let i=0;i<city.length;i++){
    var option = document.createElement("option");
    option.value = city[i];
    option.dataset.num = i;
    option.textContent = city[i];
    cityBtn.appendChild(option);
}

選到那兩個select（一個是縣市一個是車站），接著跑for迴圈，用document.createElement()語法動態將縣市select裡面的option創造出來。新增了其value和textContent等等內容，最後再用appendChild()語法新增到縣市select底下。

cityBtn.addEventListener("change",function(e){
    areaBtn.innerHTML = '<option value="" selected>請選擇車站</option>';
    var option = document.querySelectorAll(".city option");
    for(let i=0;i<option.length;i++){
        if(option[i].selected){
            var num = option[i].dataset.num;
            var citySation = sations[num];
            for(let i=0;i<citySation.length;i++){
                var option = document.createElement("option");
                option.value = citySation[i];
                option.textContent = citySation[i];
                areaBtn.appendChild(option);
            }
        }
    }
},false);

在縣市的select上面綁定change事件，當使用者選擇了縣市，就會跑一個for迴圈，逐筆去比對哪個option被選到，接著把對應編號的車站用for迴圈寫到車站的select裡面。

－－－

本日結語：
今天是二十九天，進入了最後兩天！今天是做台鐵即時時刻表的表面部分，不過這樣也預告了明天，也就是鐵人賽第三十天的最終小作品是什麼了——沒錯就是一個用AJAX即時顯示查詢結果的台鐵時刻表網站!

如有寫錯之處麻煩各路高手指教><