本文給大家分享的是使用javascript實現的一個簡單的三級聯動菜單，非常簡單實用，有需要的小伙伴過來參考下吧。
用javascript制作的一個簡單三級聯動，非常簡單實用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
?。? <select id="pre" onchange="chg(this);">
<option value="-1">請選擇</option>
</select>
市：
<select id="city" onchange="chg2(this)" ;></select>
區：
<select id="area"></select>
</body>
<script>
//聲明省
var pres = ["北京", "上海", "山東"]; //直接聲明Array
//聲明市
var cities = [
["東城", "昌平", "海淀"],
["浦東", "高區"],
["濟南", "青島"]
];
var areas = [
[
["東城1", "東城2", "東城3"],
["昌平1", "昌平2", "昌平3"],
["海淀1", "海淀2", "海淀3"]
],
[
["浦東1", "浦東2", "浦東3"],
["高區1", "高區2", "高區3"]
],
[
["濟南1", "濟南2"],
["青島1", "青島2"]
]
]
//設置一個省的公共下標
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
//先設置省的值
for (var i = 0; i < pres.length; i++) {
//聲明option.<option value="pres[i]">Pres[i]</option>
var op = new Option(pres[i], i);
//添加
preEle.options.add(op);
}
function chg(obj) {
if (obj.value == -1) {
cityEle.options.length = 0;
areaEle.options.length = 0;
}
//獲取值
var val = obj.value;
pIndex = obj.value;
//獲取ctiry
var cs = cities[val];
//獲取默認區
var as = areas[val][0];
//先清空市
cityEle.options.length = 0;
areaEle.options.length = 0;
for (var i = 0; i < cs.length; i++) {
var op = new Option(cs[i], i);
cityEle.options.add(op);
}
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
function chg2(obj) {
var val = obj.selectedIndex;
var as = areas[pIndex][val];
areaEle.options.length = 0;
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
