JavaScript開發(fā)三級(jí)聯(lián)動(dòng)之前端
本節(jié)介紹了前端的代碼,比較簡單,但是也有需要注意的地方。
下拉菜單的標(biāo)簽是select,這個(gè)標(biāo)簽下的option標(biāo)簽的作用:
option 元素定義下拉列表中的一個(gè)選項(xiàng)(一個(gè)條目)。
option 元素位于 select 元素內(nèi)部。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三級(jí)聯(lián)動(dòng)</title> <style> *{margin:0;padding:0;} </style> </head> <body> <div> 請選擇地區(qū): <select name="" id="proc" onchange="showCity()"> <option value="">--請選擇省--</option> </select> <select name="" id="city" onchange="showDist()"> <option value="">--請選擇市--</option> </select> <select name="" id="dist"> <option value="">--請選擇區(qū)--</option> </select> </div> </body> </html>
這個(gè)是功能的前端代碼,樣式什么的比較簡單,主要是能實(shí)現(xiàn)功能即可。
有人肯定會(huì)對onchange="showCity()"可能不理解,這個(gè)是什么,怎么寫在這呢。
這是綁定的一個(gè)點(diǎn)擊事件,為的是在點(diǎn)擊選擇省之后,觸發(fā)市的下拉菜單的選項(xiàng)。
同樣,onchange="showDist()"是在選擇市之后觸發(fā)區(qū)的下拉菜單的選項(xiàng)。
這也就是所謂的聯(lián)動(dòng),因?yàn)槭∈袇^(qū)有三級(jí)關(guān)系,所以叫三級(jí)聯(lián)動(dòng)。