今天要來介紹
下拉選單 change 事件 與 呈現畫面
那 change 事件當然伊定是綁在選單上啦~~

let selectMenu = document.querySelector('.selectMenu');
selectMenu.addEventListener('change',updateListSel,false);
function updateListSel(e){
    let selectData = [];
    let str = selectMenu.value;
    console.log(str);
    title.textContent = str;
    for(let i = 0 ;i < data.length; i++){
        if(e.target.value === data[i].Zone){
            selectData.push(data[i]);
        }else if(e.target.value === '全區域景點'){
            selectData = data;
        }
    }
    updateList(selectData);
}

這裡我們宣告一個空陣列 來接收未來過濾後的物件
若選擇的value值與區域名字符合
則把符合的資料塞進空陣列
若選擇的是全區域景點
則空陣列會等於所有資料

當然現在只是在處理資料的部分
並還沒有呈現於畫面
資料處理完後
便可以開始呈現畫面啦

function updateList(data){
    let str = "";
    data.forEach((item) => {
        str +=
            `
            <div class=" col-lg-4 col-md-6 my-3">
                <div class="card text-center h-100">
                    <div class="card-header">
                        ${item.Name}
                    </div>
                    <div class="card-body">
                        <div class="card-img-top bg-cover d-flex justify-content-between align-items-end text-white" style="background-image: url(${item.Picture1}); height: 155px;">
                        </div>
                        <div class="d-flex flex-column align-items-start mt-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <i class="fas fa-clock mr-2"></i>
                                <span class="card-text">${item.Opentime}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                <span>${item.Add}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <i class="fas fa-phone mr-2"></i>
                                <span>${item.Tel}</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer ">
                        <span>${item.Ticketinfo}</span>
                    </div>
                </div>
            </div>
        `
    });
    list.innerHTML = str;
}

那今天的介紹就到這裡啦~
明天我們會加上gotop按鈕
讓使用者體驗更好
附上今天的CodePen
CodePen: https://codepen.io/wemyferb/pen/rNLNpyY