九色在线网站,欧美日本一道本,亚洲成精国产精品女

復選框添加，刪除信息，過濾重復

網絡 2008/12/16 19:32:31 深山行者字體:大中小瀏覽 10878

以下為詳細代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>復選框添加，刪除信息，過濾重復</title>
<style type="text/css">

</style>
</head>
<body>
<div id="main">
  <input name="button" type="button" class="bton pointer" value="請選擇" onclick="openBg(1);openSelect(1)"/>
  <div id="result">
		<div class="tit bgc_eee">
			<h2>您已選擇的城市匯總</h2>
		</div>	
		<div class="cont" id="makeSureItem">
		</div>
  </div>
</div>
	
<div id="bg">
</div>
<div id="selectItem" class="hidden">
		<div class="tit bgc_ccc move" onmousedown="drag(event,this)">
			<h2 class="left">請選擇城市</h2>
			<span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span>
			<span class="pointer right" onclick="makeSure();">[確定]</span>			
		</div>
		<div class="cls"></div>
		<div class="cont">
			<div id="selectSub">
				<select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;">
					<option value="0">第0層</option>
					<option value="1">第1層</option>
					<option value="2">第2層</option>
					<option value="3">第3層</option>
				</select>
				<div id="c00">
					<input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京
					<input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建
					<input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川	
					<input type="checkbox" name="ck00" onclick="addPreItem()" value="江蘇"/>江蘇
				</div>
				<div id="c01">
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="貴州"/>貴州
				</div>
				<div id="c02">
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龍江"/>黑龍江
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="遼寧"/>遼寧
				</div>
				<div id="c03">
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="美國"/>美國
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗
					<input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本
				</div>
			</div>
		</div>
		<div id="preview">
			<div class="tit bgc_eee c_999">
				<h2>您已選擇的城市</h2>
			</div>	
			<div class="cont" id="previewItem">
			</div>
		</div>
</div>
	
<script type="text/javascript">
/* ------使用說明----- */
/*
	添加城市方法：
	    添加組：找到id 是 "selectSub"中select標簽下，添加option標簽 value屬性遞增，找到 id 是 "selectSub",按照原有格式添加div,其id屬性遞增
	添加二級傅選礦選項
		復制 id 是 "selectSub" 下任意input標簽，粘貼在需要添加的位置。
*/
var grow = $("selectSub").getElementsByTagName("option").length; //組數(shù)
var showGrow = 0;//已打開組
var selectCount = 0; //已選數(shù)量 
showSelect(showGrow);
var items = $("selectSub").getElementsByTagName("input");
//alert(maxItem);
//var lenMax = 2; 
//alert(1);
function $(o){ //獲取對象
	if(typeof(o) == "string")
	return document.getElementById(o);
	return o;
}
function openBg(state){ //遮照打開關閉控制
	if(state == 1)
	{
		$("bg").style.display = "block";
		var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
	//alert(document.body.offsetHeight);
	//alert(document.documentElement.offsetHeight);
		$("bg").style.height = h + "px";
	}
	else
	{
		$("bg").style.display = "none";
	}	
}
function openSelect(state){ //選擇城市層關閉打開控制
	if(state == 1)	
	{
		$("selectItem").style.display = "block";
		$("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";
		$("selectItem").style.top = document.body.scrollTop + 100 + "px";		
	}
	else
	{
		$("selectItem").style.display = "none";
	}
}
function showSelect(id){
	for(var i = 0 ; i < grow ;i++)
	{
		$("c0" + i).style.display = "none";
	}
	$("c0" + id).style.display = "block";
	showGrow = id;
}
function open(id,state){ //顯示隱藏控制
	if(state == 1)
	$(id).style.display = "block";
	$(id).style.diaplay = "none";
}
function addPreItem(){	
	$("previewItem").innerHTML = "";
	var len　= 0 ;
	for(var i = 0 ; i < items.length ; i++)
	{
		if(items[i].checked == true)
		{
			//len++;
			//if(len > lenMax)
			//{
			//	alert("不能超過" + lenMax +"個選項！")
			//	return false;
			//}
			var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;
			$("previewItem").innerHTML += mes;
			//alert(items[i].value);
		}
	}
}
function makeSure(){
	//alert(1);
	//$("makeSureItem").innerHTML = $("previewItem").innerHTML;
	openBg(0);
	openSelect(0);
	copyItem("previewItem","makeSureItem")	
}
function copyHTML(id1,id2){
	$(id2).innerHTML = $("id1").innerHTML;
}
function copyItem(id1,id2){
	
	var mes = "";
	var items2 = $(id1).getElementsByTagName("input");
	for(var i = 0 ; i < items2.length ; i++)
	{
		if(items2[i].checked == true)
		{
			mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;			
		}
	}
	$(id2).innerHTML = "";
	$(id2).innerHTML += mes;
	//alert($(id2).innerHTML);
}
function same(ck){
	for(var i = 0 ; i < items.length ; i++)
	{
		if(ck.value == items[i].value)
		{
			items[i].checked = ck.checked;
		}
	}
}	
/* 鼠標拖動 */
var oDrag = "";
var ox,oy,nx,ny,dy,dx;
function drag(e,o){
	var e = e ? e : event;
	var mouseD = document.all ? 1 : 0;
	if(e.button == mouseD)
	{
		oDrag = o.parentNode;
		//alert(oDrag.id);
		ox = e.clientX;
		oy = e.clientY;		
	}
}
function dragPro(e){
	if(oDrag != "")
	{	
		var e = e ? e : event;
		//$(oDrag).style.left = $(oDrag).offsetLeft + "px";
		//$(oDrag).style.top = $(oDrag).offsetTop + "px";
		dx = parseInt($(oDrag).style.left);
		dy = parseInt($(oDrag).style.top);
		//dx = $(oDrag).offsetLeft;
		//dy = $(oDrag).offsetTop;
		nx = e.clientX;
		ny = e.clientY;
		$(oDrag).style.left = (dx + ( nx - ox )) + "px";
		$(oDrag).style.top = (dy + ( ny - oy )) + "px";
		ox = nx;
		oy = ny;
	}
}
document.onmouseup = function(){oDrag = "";}
document.onmousemove = function(event){dragPro(event);}
</script>
</body>
</html>

前一頁:靜態(tài)頁面在文本框中輸入數(shù)字，表格直接算出相應的結果

后一頁:javascript表單驗證！

相關閱讀: 利用CSS制作的網站中新聞文章列表效果; 中國通信服務攝影作品在線投票; ASP事務處理 for access; JS自動格式化輸入的數(shù)字/千位分隔符; 利ASP里的FOS導出WORD或Excel文檔(本人測試成功); 廣西南寧美程國際旅行社有限公司; 把以前的做的個人網站程序提供下載,程序大了點,不過全; 國旅（深圳）國際旅行社有限公司

共有0條關于《復選框添加，刪除信息，過濾重復》的評論: 發(fā)表評論

正在加載評論......

返回頂部發(fā)表評論

呢稱:
表情:
內容:	評論內容:不能超過 1000 字,需審核,請自覺遵守互聯(lián)網相關政策法規(guī)。
驗證碼:

網友評論聲明,請自覺遵守互聯(lián)網相關政策法規(guī)。

您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發(fā)布國家法律、法規(guī)明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發(fā)布內容擁有處置權。

更多信息>>欄目類別選擇: 百度小程序開發(fā); 微信小程序開發(fā); 微信公眾號開發(fā); uni-app; asp函數(shù)庫; ASP; DIV+CSS; HTML; python

更多>>同類信息: input文本輸入框只能輸入數(shù)字或字母或漢字等; 用于深山在線投票的一個javascript統(tǒng)計checkbox現(xiàn)在選中的個數(shù)一邊點復選框一邊驗證并計算現(xiàn)在選了多少個復選框; 利用javascript簡短功能就可以檢查form表單中的元素是否已經填寫; javascript日期驗證比較; javascript 根據(jù)漢字拼音首字母快速定位下拉列表; javascript取漢字拼音首字母縮寫程序

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動端自動化測試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來做投票; 火狐Mozilla Firefox出現(xiàn)：無法載入您的Firefox配置文件它可能已經丟失或是無法訪問問題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過代碼修改pip下載源讓下載庫飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機抽取信息: 旅行社網站模板默認風格1; asp統(tǒng)計信息/文章每日、每周、每月、總訪問量的方法; 旅行社網站模板默認風格13; 計算ASP頁面執(zhí)行時間; 連云港看網; ASP.NET常用的三十三種實用代碼(中)

更多標簽熱門標簽

方法無限分隔符圖片高亮 div CSS 調節(jié) Java 收縮 V3.1 DOCTYPE 126 filter FSO pr 愛墻布局 Session 版權聲明旅行社 web 2.0 教程關聯(lián) 長用戶體驗初級數(shù)據(jù) 定制省市腳本調色上傳還原半透明 PSD 函數(shù) 尺寸 Response 2003 破解客戶端中英代碼 email 我想你 time 豎排窗口黑白調用

復選框添加，刪除信息，過濾重復

復選框添加，刪除信息，過濾重復