JavaScript開發三級連動之前端

本節介紹了前端的程式碼,比較簡單,但是也有需要注意的地方。

下拉式選單的標籤是select,這個標籤下的option標籤的作用:

option 元素定義下拉清單中的一個選項(一個條目)。

option 元素位於 select 元素內部。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>三级联动</title>
   <style>
*{margin:0;padding:0;}
   </style>
</head>
<body>
<div>
请选择地区:
   <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="">--请选择区--</option>
   </select>
</div>
</body>
</html>

這個是功能的前端程式碼,樣式什麼的比較簡單,主要是能實現功能即可。

有人一定會對onchange="showCity()"可能不理解,這個是什麼,怎麼寫在這呢。

這是綁定的一個點擊事件,為的是在點擊選擇省之後,觸發市的下拉式選單的選項。

同樣,onchange="showDist()"是在選擇市之後觸發區的下拉式選單的選項。

這也就是所謂的連動,因為省市區有三級關係,所以叫三級連動。

繼續學習
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动</title> <style> *{margin:0;padding:0;} </style> </head> <body> <div> 请选择地区: <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="">--请选择区--</option> </select> </div> </body> </html>
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!