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>

javaEE (四）javaweb_JavaScript (6) 省市二級聯動

Date：2018/11/17 效果圖，籍貫選湖北，然後後面就會出現湖北的地級市: 原始碼： <!-- 1、事件(onchange)； 2、建立二維陣列儲存省份和城市；（陣列長度 = 最大角標+1） 3、獲取使用者選擇的省份(使用方法傳參的方式：th

javaEE (四）javaweb_JavaScript (4) 改進表格變色：滑鼠進入表格變色

Date：2018/11/17 效果如圖所示，滑鼠進入表格變色，游標離開恢復原始碼：   <!D

javaEE (四）javaweb_JavaScript (4) 表格變色：隔行變色

效果如圖所示，隔行變色原始碼： <!-- 新標籤： <thead> <tr> <th> </th> </tr> </thead> <tbody> <

javaEE (四）javaweb_JavaScript (5) 表單全選

Date：2018/11/17 效果如圖：點選一個，其他全選，可以復原：原始碼：  <!-- 2、獲取複選框：var checkAllEle = document.getE

javaEE (四）javaweb_JavaScript (7) 動態載入列表

Date：2018/11/17 效果如圖，點選按鈕就會增加一個hah，主要是測試建立節點和嵌入節點的功能，具體例子在（6）中有體現：原始碼： <!-- 1、document.createTextNode 建立文字節點 2、document.crea

html+js省市二級聯動（推薦）

1、html+js部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二級聯動</title> </hea

省市二級聯動基礎數據

蘇州牡丹江二級廣元十堰石家莊湖北 ++ htm /* * @Param z:String select標簽的data-province屬性值 * @Param c:String select標簽的 data-city屬性值 * */ windo

微信小程序picker組件 - 省市二級聯動

內江新鄉當前桂林 AI object HA i++ 貝爾微信小程序picker組件自帶省市區選擇器，但是業務需求需要省市選擇器，參考官方demo自己寫了一個省市選擇器 wxml文件 <view class="section"> <view c

基於element ui下拉框的省市二級聯動Vue元件

本人Vue小白，程式碼比較粗陋簡單，歡迎指導。以下原始碼基於element ui下拉框，對外輸出為選擇省、市的城市編碼，提供重置的方法。 json檔案檢視另一篇文章： https://blog.csdn.net/u013253924/article/details/84334144

中國城市程式碼json，省市二級聯動json

根據中國城市程式碼表整理的json檔案： level代表行政級別 code代表城市編碼 { "provinces": [ { "name":"北京市", "level":"1", "code":"1100", "cities

JavaScript中省市二級聯動建立方法

大家好，我是今天的博主，<一個想做全棧的鹹魚> 今天和大家一起學習一下JavaScript中省市二級聯動建立方法分析: 1、使用（onchange）事件，繫結一個函式 2、建立一個二維陣列來儲存省份和城市，陣列分別來存放省份和城市 3、來獲取使用者選擇的省

分別使用js和JQuery實現省市二級聯動

1.1html js中this指的是當前操作的物件 <tr> <td>籍貫</td> <td><select onchange="changeCity(this.value)" id="province" &g

Ajax,js實現省市二級聯動

Ajax，js實現省市二級聯動這裡不羅嗦，直接放圖，分析。如圖實現效果。如下：前端程式碼分析：後端程式碼，相當簡單，只需要查詢資料庫，省份放一個list集合，城市放一個list集合，回寫響應給前端。前端通過迴圈，一一獲取。 response.setContentType(“

JS-省市二級聯動

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

jQuery完成省市二級聯動

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成省市二級聯動</title> <style type="

原生js實現省市二級聯動

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面重新佈局</title> <style type="text/css

javaEE (三）javaweb_JavaScript (2)輪播圖片+彈出廣告

Day：2018/11/13 在網頁上輪圖片和彈出廣告：原始碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例

javaEE (三）javaweb_JavaScript (1)表單校驗

Date：2018/11/13 1：表單校驗效果圖：在表單中輸入的資訊不符合時候，會彈窗警告。原始碼：  <!-

MUI-picker（選擇器），一級、二級聯動、三級聯動

mui框架擴充套件了pipcker元件,可用於彈出選擇器,在各平臺上都有統一表現.poppicker和dtpicker是對picker的具體實現 1、檔案引用 poppicker元件依賴mui.picker.js/.css mui.poppicker.js/.cs

Js省市二級聯動

一、javascript 採用二維陣列的方式做了個簡單的省市級二級聯動 <!DOCTYPE html> <html lang="en"> <head> &

javaEE (四）javaweb_JavaScript (6) 省市二級聯動

相關推薦