3.2作業第二題
阿新 • • 發佈：2019-01-09
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>省市級聯</title> <style type="text/css"> #div1{ width:100px ; height:100px ; border:1px solid #000 ; background-color:#F00 ; } </style> <script type="text/javascript"> function testChange(){ //通過id屬性獲取選項內容 var jiguan = document.getElementById("jiguan").value ; //獲取id="city"所在的select標籤物件 var city = document.getElementById("city") ; city.innerHTML = "" ; //判斷 if(jiguan=="陝西"){ //建立一個數組 var arr = ["西安","寶雞","渭南"] ; //遍歷陣列 for(var i = 0 ; i <arr.length ; i++){ //設定city所在的select的innerHTML屬性 city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ; } } if(jiguan=="廣東"){ //建立一個數組 var arr = ["深圳","廣州","珠海"] ; //遍歷陣列 for(var i = 0 ; i <arr.length ; i++){ //設定city所在的select的innerHTML屬性 city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ; } } if(jiguan=="山東"){ //建立一個數組 var arr = ["煙臺","濟南","德州"] ; //遍歷陣列 for(var i = 0 ; i <arr.length ; i++){ //設定city所在的select的innerHTML屬性 city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ; } } } </script> </head> 請選擇籍貫: <select id="jiguan" onchange="testChange()"> <option value="請選擇">請選擇<option> <option value="陝西">陝西<option> <option value="山東">山東<option> <option value="廣東">廣東<option> </select> 請選擇城市: <select id="city"> </select> <hr/> <div id="div1" onmouseover="testMouseOver()" onmouseout="testMouseOut()">請選擇你的籍貫！</div> </body> </html>