利用JavaScript實現註冊頁面省市聯動效果(附程式碼)

初心cc發表於2018-11-23

前段設計註冊頁面技巧:
達到省市聯動效果

<td>
						<select onchange="selectProvince()" id="province">
			                  <option value="-1">--請選擇--</option>
			                  <option value="0">甘肅省</option>
			                  <option value="1">陝西省</option>
			                  <option value="2">浙江省</option>
		                </select>
		                <select id="city"></select>
</td>
 <script type="text/javascript">
    var provinces = [
				["蘭州市","白銀市","隴南市","酒泉市"],
				["西安市","寶雞市","漢中市","延安市"],
				["杭州市","寧波市","台州市","溫州市"]
			];
			
			function selectProvince(){
				var province = document.getElementById("province");
				//得到當前選中的是哪個省份
				//alert(province.value);
				var value = province.value;
				//從陣列中取出對應的城市資訊
				var cities = provinces[value];
				var citySelect = document.getElementById("city");
				//清空select中的option
				citySelect.options.length = 0;
				
				for (var i=0; i < cities.length; i++) {
//					alert(cities[i]);
					var cityText = cities[i]; 
					//動態建立城市元素節點   
					
					//建立option節點
					var option1 = document.createElement("option"); // <option></option>
					//建立城市文字節點
					var textNode = document.createTextNode(cityText) ;
					//將option節點和文字內容關聯起來
					option1.appendChild(textNode);  
					
//					新增到城市select中
					citySelect.appendChild(option1);
				}
				
			}
</script>

相關文章