本文實例為大家分享了js實現三級級聯特效的具體代碼，供大家參考，具體內容如下
<!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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
