javaEE (四)javaweb_JavaScript (6) 省市二級聯動
阿新 • • 發佈:2018-12-22
Date:2018/11/17
效果圖,籍貫選湖北,然後後面就會出現湖北的地級市:
原始碼:
<!--
1、事件(onchange);
2、建立二維陣列儲存省份和城市;(陣列長度 = 最大角標+1)
3、獲取使用者選擇的省份(使用方法傳參的方式:this.value);
4、遍歷陣列,獲取省份,與使用者選擇的省份作比較,相同,繼續遍歷該省份下所有城市;
5、建立文字節點和元素節點,並新增;createTextNode createElement appendChild
6、最後用city2.options.length = 0將第二個選擇表裡面的資料清空;
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊頁面重新佈局</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
}
#clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#bottom{
text-align: center;
}
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
background: url(../img/regist_bg.jpg);
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}
</style>
<script>
//建立陣列儲存省市;
var cities = new Array(3);
cities[0] = new Array("湖北1","湖北2","湖北3","湖北4");
cities[1] = new Array("湖南1","湖南2","湖南3","湖南4");
cities[2] = new Array("河南1","河南2","河南3","河南4");
cities[3] = new Array("河北1","河北2","河北3","河北4");
function changeCity(val){
var city2 = document.getElementById("city2");
city2.options.length = 0;
for(var i = 0 ; i < cities.length; i++){
if(val == i){
for(var j = 0; j < cities[i].length;j++){
var textNode = document.createTextNode(cities[i][j]); //建立一個文字節點;
var cityEle = document.createElement("option"); // 建立一個城市元素(標籤);
cityEle.appendChild(textNode);
city2.appendChild(cityEle);
}
}
}
}
</script>
</head>
<body>
<div>
<!--1.logo部分的div-->
<div>
<!--切分為3個小的div-->
<div class="top">
<img src="../img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="../img/header.png" height="47px"/>
</div>
<div class="top" style="padding-top: 15px;height: 35px;">
<a href="#">登入</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動-->
<div id="clear">
</div>
<!--2.導航欄部分的div-->
<div id="menu">
<ul>
<li >首頁</li>
<li >電腦辦公</li>
<li >手機數碼</li>
<li >孕嬰保健</li>
<li >鞋靴箱包</li>
</ul>
</div>
<!--3.中間登錄檔單部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">會員註冊</font>
</td>
</tr>
<tr>
<td>
使用者名稱
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必須以字母開頭')" onblur="check('username','使用者名稱不能為空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密碼長度不能低於6位!')" onblur="check('password','密碼不能為空!')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>確認密碼</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.編寫HTML檔案部分的內容-->
<tr>
<td>籍貫</td>
<td>
<!--2.確定事件,通過函式傳參的方式拿到改變後的城市-->
<select onchange="changeCity(this.value)">
<option>--請選擇--</option>
<option value="0" >湖北</option>
<option value="1">湖南</option>
<option value="2">河南</option>
<option value="3">河北</option>
</select>
<select id="city2">
</select>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>驗證碼</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="註冊" />
</td>
</tr>
</form>
</table>
</div>
</div>
<!--4.廣告圖片的div-->
<div id="">
<img src="../img/footer.jpg" width="99%" />
</div>
<!--5.超連結與版權資訊的div-->
<div id="bottom">
<a href="#">關於我們 </a>
<a href="#">聯絡我們 </a>
<a href="#">招賢納士 </a>
<a href="#">法律宣告</a>
<a href="#">友情連結</a>
<a href="#">支付方式</a>
<a href="#">配送方式 </a>
<a href="#">服務宣告 </a>
<a href="#">廣告宣告 </a>
<p>Copyright © 2005-2016 傳智商城 版權所有 </p>
</div>
</div>
</body>
</html>