<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="Author" content="猿道教育-Will老師" > <meta name="Keywords" content="猿說教育,HTML,CSS,JavaScri ...
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="Author" content="猿道教育-Will老師" > <meta name="Keywords" content="猿說教育,HTML,CSS,JavaScript、省市區級聯下拉列表" > <meta name="Description" content="網頁的描述信息，簡介：省市區級聯下拉列表的實現" > <title>省市區級聯下拉列表</title> <style> select{ /*元素選擇器，所有的同名標簽select*/ border:1px solid blue; /*padding:5px 10px; 上下、左右*/ border: 1px solid red; /*後面的優先順序高*/ padding: 5px 10px 6px 7px; margin: 20px 25px; border-radius:25px; } .bigSel{ /*類選擇器 某個元素class屬性值=bigSel*/ width:280px; } #provinces{ /*id選擇器，id屬性值=provinces，優先順序>類選擇器>元素選擇器*/ border-color:blue; } </style> <script> // $是自己定義的一個方法，用於根據id獲取元素 function $(v){ return document.getElementById(v); } var p = ['四川','河南','河北','山西','貴州','山東','甘肅']; p['四川'] = ['成都','綿陽','攀枝花','德陽','雅安']; p['河南'] = ['鄭州','洛陽','周口','開封','信陽']; p['河北'] = ['保定','石家莊','邢台','唐山','邯鄲']; p['成都'] = ['金牛區','成華區','武侯區','天府區','郫都區']; p['鄭州'] = ['金水區','二七區']; // 在頁面載入的時候講所有省份添加到provinces的select中 window.onload = function(){ // 遍歷省份數組，將其中的所有值，構造Option對象添加到省份下拉框中 for(var i=0; i<p.length; i++){ // $是自己定義的一個方法，用於根據id獲取元素 $("provinces").options.add(new Option(p[i],p[i])); } // 頁面載入的時候，設置預設省份為 四川，城市變換為省會，區取這個城市的第一個區？ $('provinces').value = "四川"; showCitys($('provinces').value); $('citys').value = $('citys').options[0].value; showAreas($('citys').value); }
/*在城市下拉框中顯示省份v對應的所有城市*/ function showCitys(v){ // 清空城市列表框中原有所有城市 $("citys").options.length = 0; if(!(v<0)){ var citys = p[v]; // 拿到這個省份對應的所有城市 for(var i= 0; i<citys.length; i++){ $("citys").options.add(new Option(citys[i],citys[i])); } } // 設置地區預設值為第一個區 showAreas($("citys").value); }
/*在地區下拉框中顯示該城市對應的所有區縣*/ function showAreas(v){ $("areas").options.length = 0; if(!(v<0)){ // 拿到城市對應的所有區縣 var areas = p[v]; for(var i=0; i<areas.length;i++){ $('areas').options.add(new Option(areas[i],areas[i])); } } }
</script> </head> <body> <!-- 亂碼產生的原因：文件保存時的編碼與打開文件時使用的編碼不一致 文件內部設置的編碼，與文件保存時的編碼不一致 --> <form name="frmProvince"> <select name="provinces" id="provinces" class="bigSel" onchange="showCitys(this.value)"> <option value="-1">-- 請選擇 --</option> </select> <select name="citys" id="citys" onchange="showAreas(this.value)"> <option value="">-- 請選擇 --</option> </select> <select name="areas" id="areas" > <option value="">-- 請選擇 --</option> </select> </form> </body> </html>
