溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript實現三級級聯特效的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 實現效果：選擇省會出現相應的縣下拉框，同時市的下拉框改變-->
<script type="application/javascript">
//二維數組存放市的信息
var shi =[["麗水市","杭州市"],["新鄉","鄭州"]];
//三維數組存放縣的信息
var xianes = [[["云和","景寧"],["桐廬","原陽"]],[["衛輝","下鄉"],["中原","二七"]]];
//所選的省值
var proIndex = 0;
function sgc(){
//獲得所選擇的省的下拉框值
var pro = document.getElementById("sheng");
//獲得市的下拉框
var cit = document.getElementById("shi");
//將省的value與市的一維數組下標所對應
proIndex = pro.value-1;
//清空市下拉框中原有的值
cit.options.length = 1;
//通過for循環往下拉框中添加市的信息
for(var i = 0;i < shi[proIndex].length;i++){
var op = document.createElement("option");
var citName = document.createTextNode(shi[proIndex][i]);
op.value = i;
op.appendChild(citName);
cit.appendChild(op);
}
}
//市的值改變后改變縣的值
function sic(){
var are = document.getElementById("xian");
var cit = document.getElementById("shi");
are.options.length = 1;
//通過proIndex獲得所選的省的值作為縣的數組的一維數組下標，通過cit.value作為縣數組的二維數組下標，遍歷獲得數組值
for(var i = 0;i<xianes[proIndex][cit.value].length;i++){
var op = document.createElement("option");
var areName = document.createTextNode(xianes[proIndex][cit.value][i]);
op.value = i;
op.appendChild(areName);
are.appendChild(op);
}
}
</script>
//onchange():控件的value值改變后調用方法
<select id = "sheng" onchange = "sgc();">
<option>----省份---</option>
<option value = "1">浙江省</option>
<option value = "2">河南省</option>
</select>
<select id = "shi" onchange="sic();">
<option>---市區---</option>
</select>
<select id = "xian" >
<option>---縣區---</option>
</select>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript實現三級級聯特效的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
