運用極簡行程式碼實現省市二級聯動【固定資料版】
阿新 • • 發佈：2020-12-19
技術標籤：分享實踐前端javascriptjqueryhtml5
運用極簡行程式碼實現省市二級聯動【固定資料版】
固定資料(加到map.js開頭)
var area =[
{
"proName":"廣東",
"cityName":['潮州','東莞','佛山','廣州','河源','惠州','江門','揭陽','茂名','梅州','清遠','汕頭','汕尾','韶關','深圳','陽江','雲浮','湛江','肇慶','中山','珠海'],
}, {
"proName" map.html
<head>
<!-- 樣式 -->
<style>
body { background: #eee; }
select { width: 100px;outline: none; }
</style map.js(方法1：Jquery寫法)
$(function() {
initPro() //先載入省份
})
function initPro() {
let _pro = $("#pro")
for (let i = 0; i < area.length; i++) {
_pro.append($("<option></option>").val(i).html(area[i].proName))
}
}
function initCity() {
var idx = $("#pro").val()
let _city = $("#city")
_city.prop("length", 1) // prop設定屬性和值，清空city佇列，1為顯示預設文字
for (var i = 0; i < area[idx].cityName.length; i++) {
_city.append($("<option></option>").val(i+1).html(area[idx].cityName[i]))
}
}
map.js(方法2：JavaScript寫法)
window.onload = function() {
initPro() //先載入省份
}
function initPro() {
let _pro = document.getElementById("pro")
for (let i in area) {
_pro.add(new Option(area[i].proName, i), null)
}
}
function initCity() {
let idx = document.getElementById("pro").value;
let _city = document.getElementById("city");
_city.length = 1; // 每次都先清空city
for (var i in area[idx].cityName) {
_city.add(new Option(area[idx].cityName[i], i), null)
}
}
還沒滿足您的需求？更多請了解：運用極簡行程式碼實現省市二級聯動【json動態資料版】