<title>互動式下拉選單</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<!-- 這裡將放置互動式下拉選單的內容 -->
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<h2>台灣縣市 API:</h2>
<p>第一層選單</p>
<select id="city" name="city">
<option value="">請選擇</option>
</select>
<p>第二層選單 (先隱藏，選完第一層後再出現)</p>
<select id="area" name="area" style=";">
<option value="">請選擇</option>
</select>
</body>
</html>
$.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>
https://raw.githubusercontent.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/master/CityCountyData.json<br>
台灣縣市 API:<br>
第一層選單
<select id = "city" name="city">
<option value = "">請選擇</option>
</select>
第二層選單(先隱藏，選完第一層後再出現)
<select id = "area" name="area" style=";">
<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
