您好,登錄后才能下訂單哦!
這篇文章主要介紹了js如何實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)非select下拉框版,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
效果
代碼如下,小白寫(xiě)的有點(diǎn)亂,大家想看的就看看
1.html代碼
<div class="box"> <section class="province">省</section> <section class="city">市</section> <section class="area">區(qū)</section> <div class="si"> </div> </div>
2.css代碼
<style> .box{ width: 800px; height: 50px; margin: 20px auto; background-color: rgb(48, 49, 48); border-radius: 10px; display: flex; justify-content: center; align-items: center; } .box section{ display: inline-block; background-color: rgb(168, 165, 165); flex-grow: 1; height: 30px; margin-right: 10px; margin-left: 10px; border-radius: 5px; line-height: 30px; padding-left: 10px; } .box section:hover{ cursor: pointer; } .si{ display: none; } .box .all{ display: block; width: 740px; background-color: rgb(211, 203, 203); padding: 20px; position: absolute; border-radius: 10px; top: 57px; } .box .all:hover{ cursor: pointer; } .box .all span{ display: inline-block; width: 130px; height: 30px; font-size: 13px; padding-left: 10px; line-height: 30px; border-radius: 5px; margin-left: 10px; border: 1px solid #000; background-color: white; box-sizing: border-box; margin-top: 10px; } </style>
3.js代碼
<script> // 獲取內(nèi)容 var data = city_code// 這個(gè)是我的數(shù)據(jù) // 獲取省市區(qū) var province = document.querySelector(".province") var city = document.querySelector(".city") var area = document.querySelector(".area") // 獲取隱藏div var si = document.querySelector(".si") province.addEventListener("mouseover",function(){ si.classList.add("all") // 選擇省 var html = "" var all = document.querySelector(".all") for(var i = 0;i<data.length;i++){ const provinceName = data[i].name const provinceID = data[i].code html += `<span id="${provinceID}">${provinceName}</span>` } all.innerHTML=html var spanAll = document.querySelectorAll("span") for(var j =0;j<spanAll.length;j++){ spanAll[j].addEventListener("click",function(){ province.innerHTML=this.innerText province.id=this.id html = "" // 選擇市 for(var k = 0;k<data.length;k++){ if (data[k].code===province.id) { var citys = data[k].city for(var i = 0;i<citys.length;i++){ html +=`<span id="${citys[i].code}">${citys[i].name}</span>` } all.innerHTML=html var spanAll = document.querySelectorAll("span") for(var j =0;j<spanAll.length;j++){ spanAll[j].addEventListener("click",function(){ city.innerHTML=this.innerText city.id=this.id html = "" //選擇區(qū) for(var k = 0;k<citys.length;k++){ if (citys[k].code===city.id) { var areas = citys[k].area for(var i = 0;i<areas.length;i++){ html +=`<span id="${areas[i].code}">${areas[i].name}</span>` } all.innerHTML=html var spanAll = document.querySelectorAll("span") for(var j =0;j<spanAll.length;j++){ spanAll[j].addEventListener("click",function(){ area.innerHTML=this.innerText area.id=this.id si.classList.remove("all") }) } break } } }) } break } } }) } }) </script>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“js如何實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)非select下拉框版”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。