這邊希望可以讓你找到家中附近可以安裝機車後架的車行
合作車行篩選
<label for=”city”>選擇縣市：</label> <select id=”city”> <option value=””>請選擇</option> </select> <label for=”area”>選擇區域：</label> <select id=”area” disabled> <option value=””>請先選擇縣市</option> </select> <table id=”shopsTable”> <thead> <tr> <th>車行名稱</th> <th>縣市</th> <th>區域</th> <th>地址</th> <th>電話</th> </tr> </thead> <tbody> <!– 這裡的數據會透過 JavaScript 讀取 CSV 來填充 –> </tbody> </table> <script> document.addEventListener(“DOMContentLoaded”, function () { const citySelect = document.getElementById(“city”); const areaSelect = document.getElementById(“area”); const tableBody = document.querySelector(“#shopsTable tbody”); // CSV 檔案位置 const csvFilePath = “合作車行列表.csv”; // 確保你的 CSV 檔案和 HTML 在同個目錄 fetch(csvFilePath) .then(response => response.text()) .then(data => { const rows = data.split(“\n”).map(row => row.split(“,”)); const headers = rows[0]; // 取得標題列 const shopData = rows.slice(1); // 取得所有車行資料 const cities = {}; // 縣市 -> 區域 對應表 shopData.forEach(shop => { const [name, city, area, address, phone] = shop.map(s => s.trim()); // 建立縣市與區域的對應關係 if (!cities[city]) { cities[city] = new Set(); } cities[city].add(area); // 插入表格資料 tableBody.innerHTML += ` <tr data-city=”${city}” data-area=”${area}”> <td>${name}</td> <td>${city}</td> <td>${area}</td> <td>${address}</td> <td>${phone}</td> </tr> `; }); // 填充縣市選單 Object.keys(cities).forEach(city => { citySelect.innerHTML += `<option value=”${city}”>${city}</option>`; }); // 當縣市變更時，更新區域選單 citySelect.addEventListener(“change”, function () { const selectedCity = citySelect.value; areaSelect.innerHTML = ‘<option value=””>請選擇區域</option>’; if (selectedCity && cities[selectedCity]) { cities[selectedCity].forEach(area => { areaSelect.innerHTML += `<option value=”${area}”>${area}</option>`; }); areaSelect.disabled = false; } else { areaSelect.disabled = true; } filterShops(); }); // 當區域變更時，過濾表格 areaSelect.addEventListener(“change”, filterShops); function filterShops() { const selectedCity = citySelect.value; const selectedArea = areaSelect.value; document.querySelectorAll(“#shopsTable tbody tr”).forEach(row => { const rowCity = row.getAttribute(“data-city”); const rowArea = row.getAttribute(“data-area”); const match = (selectedCity === “” || rowCity === selectedCity) && (selectedArea === “” || rowArea === selectedArea); row.style.display = match ? “” : “none”; }); } }) .catch(error => console.error(“❌ 讀取 CSV 失敗：”, error)); }); </script>