您好,登錄后才能下訂單哦!
本文給大家分享的是使用javascript實(shí)現(xiàn)的一個(gè)簡單的三級聯(lián)動菜單,非常簡單實(shí)用,有需要的小伙伴過來參考下吧。
用javascript制作的一個(gè)簡單三級聯(lián)動,非常簡單實(shí)用
<!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> 區(qū): <select id="area"></select> </body> <script> //聲明省 var pres = ["北京", "上海", "山東"]; //直接聲明Array //聲明市 var cities = [ ["東城", "昌平", "海淀"], ["浦東", "高區(qū)"], ["濟(jì)南", "青島"] ]; var areas = [ [ ["東城1", "東城2", "東城3"], ["昌平1", "昌平2", "昌平3"], ["海淀1", "海淀2", "海淀3"] ], [ ["浦東1", "浦東2", "浦東3"], ["高區(qū)1", "高區(qū)2", "高區(qū)3"] ], [ ["濟(jì)南1", "濟(jì)南2"], ["青島1", "青島2"] ] ] //設(shè)置一個(gè)省的公共下標(biāo) var pIndex = -1; var preEle = document.getElementById("pre"); var cityEle = document.getElementById("city"); var areaEle = document.getElementById("area"); //先設(shè)置省的值 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]; //獲取默認(rèn)區(qū) 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。