利用js實現二級聯動的簡單例項

阿新 • • 發佈：2019-01-21

此例項是一個簡單的二級聯動，第一個列表中的值為固定的，第二個列表中的值隨著第一個列表值的變化而變化，即第一個列表影響第二個列表。
實現思路：先寫兩個<select>標籤，用name或id來區分；寫一個二維陣列來存放資訊；在一級選單中使用onchange()事件來動態載入二級選單的內容。

完整程式碼

<html>
	<head>
		<meta charset="UTF-8">
		<title>簡單城市二級聯動</title>
	</head>
	<body>
		<form action="" method="post" name="form1">
			<div id="province">
				<select  name="sltProvince" onchange="selectCity()">
					<option value="">請選擇省份</option>
					<option value="">山西省</option>
					<option value="">陝西省</option>
					<option value="">江西省</option>
					<option value="">四川省</option>
				</select>
			</div>
			<div id="city">
				<select name="sltCity">
					<option value="0">請選擇市區</option>
				</select>
			</div>
		</form>
	</body>
	<script type="text/javascript" language="javascript">
		var cityInfo = [["請選擇市區","太原市","呂梁市","臨汾市","運城市","陽泉市"],
		                ["請選擇市區","西安市","咸陽市","漢中市","延安市","榆林市"],
		                ["請選擇市區","南昌市","九江市","鷹潭市","上饒市","景德鎮市"],
		                ["請選擇市區","成都市","綿陽市","雅安市","樂山市","眉山市"]];
		
		/*二級聯動一般使用onchange事件*/
		function selectCity(){
			/*獲取省份下拉框的物件*/
			var pro = document.form1.sltProvince;
			/*獲取市區下拉框的物件*/
			var cit = document.form1.sltCity;
			/*得到對應得城市陣列，selectedIndex表示下拉框列表的索引值*/
			var selectParam = cityInfo[pro.selectedIndex-1];
			/*將城市列表的選項只留下第一個提示選項*/
			cit.length = 1;
			for(var i=0;i<selectParam.length;i++){
			    /*第一個selectParam[i]表示城市option中的value值，第二個selectParam[i]表示文字資訊*/
			    cit[i] = new Option(selectParam[i],selectParam[i]);
			}
		}
	</script>
</html>

希望對大家有所幫助！

利用js實現二級聯動的簡單例項

此例項是一個簡單的二級聯動，第一個列表中的值為固定的，第二個列表中的值隨著第一個列表值的變化而變化，即第一個列表影響第二個列表。實現思路：先寫兩個<select>標籤，用name或id來區分；寫一個二維陣列來存放資訊；在一級選單中使用onchange()事件來動態

JS實現二級聯動 (createTextNode，createElement )

JS中只有陣列，沒有集合陣列長度=角標+1 長度可變 cities[0],cities[1],cities[2],cities[3] cities[100] 長度是101 而不是5 <!DO

利用ajax實現二級聯動下拉框

下拉框二級聯動，用ajax來實現是已經非常成熟的技術了。但對於我這個java菜鳥來說，真的是費了九牛二虎之力，各種百度，各種測試。終於得以實現。程式碼相對於網上的容易理解些。現把程式碼和我在編寫的過程中遇到的問題貼出來，對自己也是一個總結，同時也希望能幫助到跟我一樣的菜鳥。

利用JS實現簡單的瀑布流效果

color position func 如何實現利用無限 bar 拓展復制代碼一.瀑布流之準備工作　　首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地

用js和jq分別實現二級聯動效果

js jq 二級聯動界面：兩個下拉框。用js方法實現:用jq方法實現:註意：在js中的for(var a in 數組) 其中的變量a依舊是下標，不是元素的值，跟其他的語言有點不一樣。同時，在js中，數組的下標是可以存放文字的。用js和jq分別實現二級聯動效果

用js+html5實現二級聯動省份下拉選單

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二級聯動省份下拉框</title> </head> &

js的二級聯動實現省份城市的選擇

/* 定義城市 */ var china = [ // 直轄市 [ '北京' ], [ '上海' ], [ '天津' ], [ '重慶' ], // 華北地區 [ '河北', '石家莊', '唐山'

原生js的二級聯動

長沙湖北合肥 city array 河北 .text 長春佛山 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title&g

[轉] 利用js實現禁用瀏覽器後退

cti scrip style 瀏覽器中文本框所有方案 att word [From] http://blog.csdn.net/zc474235918/article/details/53138553 現在很多的內部系統，一些界面，都是用戶手動點擊退出按鈕的。但

利用js實現popup彈窗

settings element type 路由數據庫點擊 ack get 事件簡單實現一個通過一個網頁，點擊生成一個彈窗，然後點擊保存之後自動關閉彈窗的功能。首先在settings文件中寫上兩條對應的路由關系。 1 urlpatterns = [ 2

原生js實現三級聯動

三級聯動 chan 學習 initial ble ont view document chang 學習自於 http://blog.csdn.net/Elenal/article/details/51493510 <!DOCTYPE html> <ht

利用js實現全、反選、全不選功能(check)

box tag 實現所有利用 .get 乒乓球獲取 get <!DOCTYPE html><html><head><meta charset="utf-8"/><title></ti

利用js實現全選、反選、全不選(button)

put () false 全選 charset btn tel pre fun <!DOCTYPE html><html><head><meta charset="utf-8"/><title>

jQuery+php實現二級聯動

view fun val -- where his this pre public php代碼： public function liandong(){ $arr = Db::table("city")->where("pid=0")->sel

jquery+ajax實現二級聯動

實現效果圖：前臺頁面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery+ajax實現二級聯動</title>

利用JS實現圖片切換

事件舉例: 1.要求實現效果：當滑鼠懸停在照片上時更換為另一張照片；當滑鼠離開時，還原為本來的圖片。說明： 1.一般來說對於一個事件問題處理起來分為三個步驟：（1）獲取事件（2）繫結事件（3）書寫事件驅動程式程式碼如下 <!doctype html> <htm

利用JS實現vue中的雙向繫結

Vue 已經是主流框架了它的好處也不用多說，都已經是大家公認的了那我們就來理解一下Vue的單向資料繫結和雙向資料繫結然後再使用JS來實現Vue的雙向資料繫結單向資料繫結指的是我們先把模板寫好，然後把模板和資料（資料可能來自後臺）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入到文件流裡面

【javaweb】JS實現省市聯動

需求：比如在註冊頁面中，需要選擇籍貫，當我們選擇省的時候，市可以隨著省的選擇不同而變動。字首知識：https://blog.csdn.net/qq_42370146/article/details/84326604 過程分析： 1. 確定事件: onchange 2. 函式

JS-省市二級聯動

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

利用js實現二級聯動的簡單例項

相關推薦