JavaScript操作頁面之添加附件與省市聯動

--------------------------------天道酬勤

如何添加多個附件

代碼如下:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8">
		<title>添加附件</title>
		<style type="text/css">
			.file{
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="files" id="files">
			<div class="file" name="file">
				<input type="file">
				<input type="button" value="刪除附件" onclick="removeFile(this)">
			</div>
		</div>
		<input type="button" value="添加附件" id="addFile" onclick="addFile()">
	</body>
	<script type="text/javascript" src="js/add.js">
		
		
	</script>
</html>
function addFile(){
			var fileNode=document.createElement("div");
			fileNode.setAttribute("name","file");
			fileNode.setAttribute("class","file");
			fileNode.innerHTML="<input type=\"file\">"+"<input type=\"button\" value=\"刪除附件\" onclick=\"removeFile(this)\">";
			var filesNode=document.getElementById("files");
			filesNode.appendChild(fileNode);
}
function removeFile(fileNode){
	var filesNode=document.getElementById("files");
	var parent=fileNode.parentNode;
	filesNode.removeChild(parent);
}

注:調用ele.removeChild(child)時,ele必須是child的父節點。

如何實現省市聯動,利用onchang="function()",當省份發生變化時,市跟着相應改變

代碼如下:

<html>
	<head>
		<meta charset="utf-8">
		<title>城市聯動</title>
		<script type="text/javascript" src="js/chain.js">
			
		</script>
	</head>
	<body>
		<select name="province" id="province" onchange="chain()">
			<option value ="" selected="selected">省份</option>
			<option value ="廣東">廣東</option>
			<option value ="江西">江西</option>
			<option value ="浙江">浙江</option>
			<option value ="安徽">安徽</option>
		</select>
		<select name="city" id="city">
			<option value ="">城市</option>
		</select>
	</body>
</html>
/*
	傳入一個二維數組和其對應索引
*/
function createCityNode(arr,index)
{
	var cityNode=document.getElementById("city");
	for(var i=0;i<arr[index].length;i++)
	{
		var optionNode=document.createElement("option");
		optionNode.setAttribute("value",arr[index][i]);
		optionNode.innerHTML=arr[index][i];
		cityNode.appendChild(optionNode);
	}
}
function chain(){
	var arr=[["廣州","深圳","汕頭","珠海"],["南昌","九江","景德鎮","新餘"],["杭州","寧波","嘉興","溫州"]
	,["合肥","安慶","六安","銅陵"]];
	var provinceNode=document.getElementById("province");
	var cityNode=document.getElementById("city");
	cityNode.options.length=1;
	// var childs=cityNode.childNodes;
	// for(var i=0;i<childs.length;)
	// {
	// 	cityNode.removeChild(childs[i]);
	// }
	var index=provinceNode.selectedIndex;
	if(index>0)
	{
		switch(index)
		{
			case 1:{
				createCityNode(arr,0);
				break;
			}
			case 2:{
				createCityNode(arr,1);
				break;
			}
			case 3:{
				createCityNode(arr,2);
				break;
			}
			case 4:{
				createCityNode(arr,3);
				break;
			}
			default:
				alert("未知錯誤!");
		}
	}
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章