使用jQuery和Ajax創建互動式網頁連動下拉選單
文、意如老師
在現代網頁開發中，實現一個優雅且互動式的使用者體驗是至關重要的，而在這其中，下拉選單是一個常見的元素，用於讓使用者選擇特定的選項或篩選內容。然而，當我們需要實現多層次的選擇時，例如台灣縣市和鄉鎮的選擇，該如何讓它變得更加智慧且方便呢？
在本文中，將帶你一起探索如何使用JQuery與Ajax技術實現台灣縣市及鄉鎮的連動下拉選單，通過這種互動式網頁體驗，你的使用者將能夠更輕鬆地選擇所需的地區，獲得更加便利且直觀的操作。
本篇文章將學習如何使用 JavaScript 和 Ajax 技術來實現一個互動式的網頁體驗，我們將以台灣縣市及其鄉鎮為例，透過兩層下拉選單的形式，讓使用者輕鬆選擇所需的地區。
🔹 深入學習實用的前端開發技術，掌握從零到一架設網站，成功轉職工程師！🔹
👉🏻 點我領取【Frontend前端開發】課程資訊💞
首先，我們將學會如何透過Ajax請求，從提供台灣縣市資料的API中獲取相關資訊，透過這個過程，我們可以將台灣的各個縣市名稱顯示在第一層選單中，提供使用者選擇的機會。接著，我們將學習如何根據使用者選擇的縣市，動態生成第二層選單，透過第二層選單，使用者可以選擇所選縣市下屬的各個鄉鎮地區。
在實作中，我們將特別關注不同瀏覽器的支援度，由於各家瀏覽器有時會實現 CSS 屬性的不同版本，為了確保網頁在各種瀏覽器中都能正確顯示，我們將使用各家瀏覽器的前綴詞，來處理兼容性問題。這樣一來，無論使用者使用的是 Firefox、Safari、Chrome、Opera還是Internet Explorer，都能順利地體驗到我們設計的互動效果。最後，我們將運用JavaScript來實現簡單的提示功能，當使用者完成兩層選擇後，網頁將顯示用戶所選的縣市和鄉鎮，讓使用者清楚了解自己所選擇的地區。
通過這個實作範例，您將深入了解如何運用 JavaScript 和 Ajax，以及如何建立互動式的下拉選單，提供更好的使用者體驗。無論您是網頁開發初學者還是有一定程度的程式經驗，這個範例都將讓您更加熟悉這些技術，並為未來開發更多功能豐富的互動式網頁奠定堅實基礎。讓我們一同探索，如何實現一個令人印象深刻的互動式網頁體驗！
完整程式碼範例：https://codepen.io/yiruatstudio/pen/GRqVZvV
實作開始：
首先，讓我們準備好縣市及鄉鎮的 API：https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json
您可以將這個 API 複製到網址列中，查看其中的內容，它包含了台灣各個縣市及其鄉鎮的資訊。
接下來，我們將使用 JavaScript 與 Ajax 技術來獲取這個 API 中的資料，並以兩層下拉選單的形式呈現給使用者。讓我們一步一步地進行實作，打造一個互動式且智慧的選擇系統。
現在，讓我們開始實作這個連動下拉選單的功能吧！
步驟一：製作 HTML 網頁
首先，我們要製作 HTML 網頁，用於展示互動式的下拉選單，在這個網頁中，我們需要引入 jQuery 庫，這將幫助我們處理網頁上的動態操作。
讓我們建立一個基本的 HTML 結構，並在 <head> 標籤中引入 jQuery：
<!DOCTYPE html>
<html>
<head>
<title>互動式下拉選單</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!-- 這裡將放置互動式下拉選單的內容 -->
</body>
</html>
在上面的程式碼中，我們引入了 jQuery 的 CDN，這樣我們就可以在網頁中使用 jQuery 的功能了。
接下來，我們將在 <body> 標籤中建立一個容器，用於放置互動式下拉選單的內容。在這個容器中，我們將創建兩個 <select> 標籤，分別用於顯示縣市和鄉鎮的選項。
程式碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2>台灣縣市 API:</h2>
<p>第一層選單</p>
<select id="city" name="city">
<option value="">請選擇</option>
</select>
<br>
<p>第二層選單 (先隱藏，選完第一層後再出現)</p>
<select id="area" name="area" style="display:none;">
<option value="">請選擇</option>
</select>
</body>
</html>
在這段 HTML 程式碼中，我們引入了 jQuery 庫，並建立了一個網頁，其中包含兩個下拉選單。
第一個下拉選單用於選擇台灣的縣市，而第二個下拉選單則用於選擇該縣市下的鄉鎮。
初始狀態下，第二個選單被設置為隱藏，只有在選擇完第一個選單後，它才會顯示出來，這樣的設計讓使用者界面更為簡潔且易於操作。
我們在 <select> 標籤中加入了一個預設的 <option>，用於提示使用者進行選擇。在後續的步驟中，我們將使用 jQuery 和 Ajax 技術，動態地將縣市和鄉鎮的選項填入這兩個下拉選單中，使得使用者能夠方便地進行選擇。
透過這樣的設計，我們能夠提供更佳的使用者體驗，讓用戶能夠輕鬆完成兩層選單的選擇，並獲得更直觀和便捷的操作。
在接下來的步驟中，我們將深入學習如何使用 jQuery 和 Ajax 技術，透過請求 API 來獲取台灣縣市和鄉鎮的資料，並將這些資料動態地填入下拉選單中。讓我們繼續進入步驟二，一起實現連動下拉選單的功能。
步驟二：JavaScript 和 Ajax 技術來實現網頁的動態操作
在這一步中，我們將使用JavaScript和Ajax技術來實現網頁的動態操作，使得下拉選單可以根據使用者的選擇而動態地改變選項。具體來說，我們將透過Ajax請求來獲取台灣縣市和鄉鎮的資料，並將這些資料填入下拉選單中。
首先，我們需要在 JavaScript 中使用 jQuery 的 $.ajax() 函式來進行Ajax 請求，我們將發送一個 GET 請求到台灣縣市資料的 API，獲取相關資訊，在成功接收到資料後，我們可以利用回調函式來處理這些資料。
接下來，我們使用 $.each() 函式來遍歷這些資料，並將台灣的各個縣市名稱填入第一層選單，這樣一來，使用者就可以在第一層選單中選擇所需的縣市。
在第一層選單的 change 事件中，我們可以獲取使用者選擇的縣市名稱，並再次使用 Ajax 請求，獲取該縣市下的所有鄉鎮資料。同樣地，我們將使用 $.each() 函式來遍歷這些鄉鎮資料，並將它們填入第二層選單中。
此時，第二層選單將會動態地顯示所選縣市下的所有鄉鎮，使用者可以在第二層選單中選擇所需的鄉鎮。
<script>
$(document).ready(function(){
// 第一層選單
$.ajax({
url: 'https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json',
type: "get",
dataType: "json",
success: function (data) {
console.log(data);
// 使用 $.each 遍歷資料，將縣市名稱填入第一層選單中
$.each(data, function (key, value) {
console.log(key, value)
$('#city').append('<option value="' + key + '">' + data[key].CityName + '</option>')
})
},
error: function (data) {
alert("讀取資料失敗");
}
});
// 第二層選單
$("#city").change(function(){
cityvalue = $("#city").val(); // 取得使用者選擇的縣市
$("#area").empty(); // 清空上次的值
$("#area").css("display", "inline"); // 顯示第二層選單
$.ajax({
url:'https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json',
type:"get",
dataType:"json",
success:function(data){
eachval = data[cityvalue].AreaList; // 取得所選縣市的鄉鎮資料
// 使用 $.each 遍歷資料，將鄉鎮名稱填入第二層選單中
$.each(eachval, function (key, value) {
$('#area').append('<option value="' + key + '">' + eachval[key].AreaName + '</option>')
});
},
error:function(){
alert("讀取資料失敗");
}
});
});
// 選完後跳出選擇值
$("#area").change(function(){
cityvalue = $("#city").val(); // 縣市
areavalue = $("#area").val(); // 鄉鎮
$.ajax({
url:'https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json',
type:"get",
dataType:"json",
success:function(data){
const cityname = data[cityvalue].CityName; // 取得所選縣市名稱
const areaname = data[cityvalue].AreaList[areavalue].AreaName; // 取得所選鄉鎮名稱
const selected = cityname + "-" + areaname; // 組合縣市與鄉鎮名稱
alert("您選擇的是：" + selected); // 顯示提示框，顯示所選的縣市與鄉鎮
},
error:function(){
alert("讀取資料失敗");
}
});
});
});
</script>
首先，我們透過Ajax請求獲取了台灣縣市及其對應的鄉鎮資料，並將縣市名稱顯示在第一層選單中。接著，當用戶選擇了特定的縣市後，第二層選單會根據所選縣市顯示該縣市下的所有鄉鎮選項。最後，當用戶選擇完兩層選單後，網頁會彈出一個提示框，顯示用戶所選的縣市和鄉鎮。使用了 JavaScript 和 Ajax 技術，通過 jQuery 提供的 $.ajax() 函式來進行 Ajax請求。首先，我們在 $(document).ready() 函式內進行了兩個 Ajax 請求，分別用於獲取台灣縣市及其鄉鎮資料。
在第一個 Ajax 請求中，我們成功地取得了台灣縣市的資料並使用 $.each() 函式來遍歷資料，將縣市名稱填入第一層選單中。接著，我們為第一層選單的change事件綁定了一個回調函式，當使用者選擇了特定的縣市後，第二層選單會根據所選縣市動態地顯示相對應的鄉鎮選項，在這個回調函式中，我們使用第二個 Ajax 請求來取得該縣市下的所有鄉鎮資料，並使用 $.each() 函式將鄉鎮名稱填入第二層選單中。最後，我們為第二層選單的 change 事件綁定了另一個回調函式。當使用者選擇完兩層選單後，我們取得所選的縣市和鄉鎮名稱，並將它們組合在一起，顯示在提示框中，讓使用者清楚了解自己所選的地區。
透過這樣的互動方式，用戶能夠快速且方便地選擇台灣縣市及其下屬的鄉鎮，使得整個網頁選擇過程更加直觀和流暢。這個實作範例將讓您更深入了解如何運用 JavaScript 和 Ajax 技術，並建立互動式的下拉選單，提供更好的使用者體驗，無論您是網頁開發初學者還是有一定程度的程式經驗，這個範例都將讓您更加熟悉這些技術，並為未來開發更多功能豐富的互動式網頁奠定堅實基礎。
完整程式碼：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json<br>
台灣縣市 API:<br>
第一層選單
<select id = "city" name="city">
<option value = "">請選擇</option>
</select>
<br>
第二層選單(先隱藏，選完第一層後再出現)
<select id = "area" name="area" style="display:none;">
<option value = "">請選擇</option>
</select>
</body>
</html>
<script>
$(document).ready(function(){
//第一層選單
$.ajax({
url: 'https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json',
type: "get",
dataType: "json",
success: function (data) {
console.log(data);
$.each(data,function(key,value){
console.log(key,value)
$('#city').append('<option value="'+key+'">'+data[key].CityName+'</option>')
})
},
error: function (data) {
alert("fail");
}
});
//第二層選單
$("#city").change(function(){
cityvalue=$("#city").val(); //取值
$("#area").empty(); //清空上次的值
$("#area").css("display","inline"); //顯現
$.ajax({
url:'https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json',
type:"get",
dataType:"json",
success:function(data){
eachval=data[cityvalue].AreaList; //鄉鎮
$.each(eachval,function(key,value){
$('#area').append('<option value="'+key+'">'+eachval[key].AreaName+'</option>')
});
},
error:function(){
alert("fail");
}
});
});
//選完後跳出選擇值
$("#area").change(function(){
cityvalue=$("#city").val(); //縣市
areavalue=$("#area").val(); //鄉鎮
$.ajax({
url:'https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json',
type:"get",
dataType:"json",
success:function(data){
alert(data[cityvalue].CityName+"-"+data[cityvalue].AreaList[areavalue].AreaName);
},
error:function(){
alert("fail");
}
});
})
});
</script>
通過本文的學習，我們成功地實現了一個互動式的網頁下拉選單，讓使用者能夠輕鬆選擇台灣縣市和鄉鎮。這展示了JQuery和Ajax技術在提升網頁使用者體驗方面的威力。經過這次實作，你已經熟悉了如何使用JQuery的選擇器來操作DOM元素，以及如何使用Ajax來處理網頁的非同步請求。
現在，你可以將這些知識應用於更多有趣的專案，打造更多創意的互動元素，讓你的網頁更加生動有趣。
📖 延伸閱讀：不用寫程式，也可以製作兩層以上連動的下拉式選單
👉我也想成為工程師👈
FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/user/LccnetTaiwan
痞客邦Blog：http://lccnetvip.pixnet.net/blog
