<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ padding: 0; margin: 0;box-sizing: border-box;}
html,body{ min-width: 1200px;}
.province{ width: 200px; height: 50px; text-align: center; font-size: 20px;}
.city{ width: 200px; height: 50px; text-align: center; font-size: 20px;}
.code{ width: 200px; height: 50px; text-align: center; font-size: 20px;}
</style>
</head>
<body>
<div>
<select class="province">
<option>---選擇省---</option>
</select>
<select class="city">
<option>選擇市</option>
</select>
<select class="code">
<option>地區編碼</option>
</select>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$.get("city.json",function(data,status){
if(status){
console.log(data.城市代碼);
$.each(data.城市代碼, function(i,el) {
console.log(el);
var str="<option>"+el.省+"</option>";
$(".province").append(str);
});
}
$(".province").change(function(){
$(".city").html("<option>選擇市</option>");
$(".code").html("<option>地區編碼</option>");
$(data.城市代碼).each(function(i,el){
if($(".province").val()==el.省){
console.log(el.市);
$(el.市).each(function(index,ele){
console.log(ele.市名);
var sta = "<option>"+ele.市名+"</option>";
$(".city").append(sta);
});
}
});
});
$(".city").change(function(){
$(".code").empty();
$(data.城市代碼).each(function(i,el){
$(el.市).each(function(index,ele){
// console.log(ele);
if (ele.市名 == $(".city").val()) {
var str="<option>"+ele.編碼+"</option>";
$(".code").append(str);
}
})
})
});
});
</script>
</body>
</html>
樣式 / 內容/ 引入/ 應用get來獲取/查詢數據
應用get比較快捷它多用於查詢或獲取數據一般通過地址（URL）來查詢或獲取數據{get的url最大傳值為256b}。然而post相比較安全它通常是來改變數據和添加數據通過內部數據的轉換來實現它去提交{post是2M}。
寫的時候盡量放在body里面去寫，因為這樣它不需要$(document).ready(funotion)
data(數據)
status（狀態碼)
$(".city").html("<option>選擇市</option>");
$(".code").html("<option>地區編碼</option>");（清空）