用javascript美化Select,并獲取相應的值 -- [表單特效]─ 深山工作室提供網絡投票系統|微信公眾號投票|微信公眾號小程序|抖音小程序|百度小程序|微信公眾號開發|企業網站建設

<thead id="jxdzp"><address id="jxdzp"><pre id="jxdzp"></pre></address></thead>

<em id="jxdzp"><span id="jxdzp"></span></em>

<listing id="jxdzp"><nobr id="jxdzp"><meter id="jxdzp"></meter></nobr></listing>

<address id="jxdzp"></address>

<noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

<noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

訂閱本欄目 RSS您所在的位置: 深山工作室 > 表單特效 > 正文

用javascript美化Select,并獲取相應的值

網絡 2009/1/20 21:02:16 深山行者字體:大中小瀏覽 10298

以下為詳細代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=zh-CN xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>用javascript美化Select,并獲取相應的值</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=Content-Language content=zh-CN>
<STYLE type=text/css>* {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
	MARGIN: 50px
}
.iDiv {
	BORDER-RIGHT: #aaa 1px solid; BORDER-TOP: #aaa 1px solid; FONT-SIZE: 12px; BACKGROUND: url(images/select_bg.gif) no-repeat 100% 0px; VERTICAL-ALIGN: middle; BORDER-LEFT: #aaa 1px solid; CURSOR: default; COLOR: #333; TEXT-INDENT: 4px; LINE-HEIGHT: 20px; BORDER-BOTTOM: #aaa 1px solid; POSITION: absolute; HEIGHT: 20px
}
.iDiv_over {
	BACKGROUND-POSITION: 100% 100%; COLOR: #f96
}
.iDiv_out {
	BACKGROUND-POSITION: 100% 0px; COLOR: #333
}
.cDiv {
	BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; Z-INDEX: 1; BACKGROUND: #f7f7f7; OVERFLOW: auto; BORDER-LEFT: silver 1px solid; CURSOR: default; BORDER-BOTTOM: silver 1px solid; POSITION: absolute; moz-user-select: none
}
.cDiv UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; listStyle: none
}
.cDiv UL LI {
	TEXT-INDENT: 4px; LINE-HEIGHT: 20px; HEIGHT: 20px
}
</STYLE>

<SCRIPT>
function $() {
	return document.getElementById(arguments[0]);
}

//取得外部class的屬性值

function getCurrentStyle(o) {
	return o.currentStyle||document.defaultView.getComputedStyle(o,null);
}

var SetAllSelects = {
	Offset:function(e) {
		var t = e.offsetTop;
		var l = e.offsetLeft;
		var w = e.offsetWidth;
		var h = e.offsetHeight;
		while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; }
		return {top:t, left:l, width:w,	height:h};
	},
	setCreated:function(obj,status) { //設置屬性
		obj.setAttribute("childCreated",status);
	},
	getCreated:function(obj) { //獲取屬性
		var status = obj.getAttribute("childCreated");
		if(status == null) { status = ""; }
		return status;
	},
	setSelectStyle:function(obj,idnum,showHeight) {
		if(obj.id == null || obj.id == "") { obj.id = "selectID_"+idnum; }
		var offset = this.Offset(obj);
		obj.style.visibility = "hidden";
		var mainDiv = document.createElement("div");
		var iDiv = document.createElement("div");
		var js_select_;
		var _this = this;
		iDiv.className = "iDiv";
		iDiv.id = js_select_+obj.id;
		iDiv.style.width = offset.width + "px";
		iDiv.style.top = offset.top + "px";
		iDiv.style.left = offset.left + "px";
		this.setCreated(iDiv,"");
		mainDiv.appendChild(iDiv);
		var tValue = obj.options[obj.selectedIndex].innerHTML;
		iDiv.innerHTML = tValue;
		iDiv.onmouseover = function() { iDiv.className = "iDiv iDiv_over"; }
		iDiv.onmouseout = function() { iDiv.className = "iDiv iDiv_out"; }
		iDiv.onclick = function() {
			var created = _this.getCreated(this);
			if (created != "") {
				if (created == "open") {
					this.nextSibling.style.display = "none";
					_this.setCreated(this,"close");
				}
				else {
					_this.setCreated(this,"open");
					var arrLiObj = this.nextSibling.getElementsByTagName("li");
					var selOjbIndex = 0;
					for(var i=0;i<arrLiObj.length;i++) {
						var status = arrLiObj[i].getAttribute("liSelected");
						if(status == null) { status = ""; }
						if(status == "selected") { selOjbIndex = i; break; }
					}
					arrLiObj[selOjbIndex].style.background = "#fff";
					arrLiObj[selOjbIndex].style.color = "#000";
					this.nextSibling.style.display = "block";
				}
			}
			else {
				_this.setCreated(this,"open");
				var cDiv = document.createElement("div");
				cDiv.className = "cDiv";
				cDiv.style.width = offset.width + "px";
				cDiv.style.height = obj.options.length * 20 + "px";
				if(parseInt(cDiv.style.height)>showHeight) {
					cDiv.style.height = showHeight + "px";
				}
				cDiv.style.top = (offset.top+parseInt(getCurrentStyle(this).height)+1) + "px";
				cDiv.style.left = offset.left + "px";
				cDiv.onselectstart = function() {return false;};
				var uUl = document.createElement("ul");
				cDiv.appendChild(uUl);
				mainDiv.appendChild(cDiv);
				for (var i=0;i<obj.options.length;i++) {
					var lLi = document.createElement("li");
					lLi.id = obj.options[i].value;
					lLi.innerHTML = obj.options[i].innerHTML;
					lLi.sValue = obj.options[i].value;
					uUl.appendChild(lLi);
				}
				var liObj = uUl.getElementsByTagName("li");
				if(liObj.length>0) {
					for (var j=0;j<obj.options.length;j++) {
						liObj[j].onmouseover = function() {
							var arrLiObj = this.parentNode.getElementsByTagName("li");
							for(var i=0;i<arrLiObj.length;i++) {
								var status = "";
								var _background = "#ccc";
								var _color = "#fff";
								if(arrLiObj[i] != this) {
									_background = "#fff";
									_color = "#000";
									status = "selected";
								}
								arrLiObj[i].style.background = _background;
								arrLiObj[i].style.color = _color;
								arrLiObj[i].setAttribute("liSelected",status);
							}
						}
						liObj[j].onclick = function() {
							obj.options.length = 0;
							obj.options[0] = new Option(this.innerHTML,this.sValue);
							this.parentNode.parentNode.style.display = "none";
							_this.setCreated(this.parentNode.parentNode.previousSibling,"close");
							iDiv.innerHTML = this.innerHTML;
						};
						liObj[0].style.background = "#ccc";
						liObj[0].style.color = "#fff";
						liObj[0].setAttribute("liSelected","selected");
					}
				}
			}
		}
		document.body.appendChild(mainDiv);
	},
	setAllSelectStyle:function() {
		var s = document.getElementsByTagName("select");
		for (var i=0; i<s.length; i++) {
			if(s[i].className == "select") {
				this.setSelectStyle(s[i],i,200);
			}
		}
	}
}

document.onclick = function(e) {
	e = e || window.event;
	var target = e.target || event.srcElement;
	var s = document.getElementsByTagName("select");
	var js_select_;
	for (var i=0; i<s.length; i++) {
		if(s[i].className == "select") {
			var objdivtmp = $(js_select_+s[i].id);
			var created = SetAllSelects.getCreated(objdivtmp);
			if (created == "open") {
				if(target != objdivtmp) {
					objdivtmp.nextSibling.style.display = "none";
					SetAllSelects.setCreated(objdivtmp,"close");
				}
			}
		}
	}
}

window.onload = function() {
	SetAllSelects.setAllSelectStyle();
}
</SCRIPT>

<META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD>
<BODY>
<FORM><SELECT> <OPTION selected>這一只不需要美化</OPTION> <OPTION>選擇1_1</OPTION> 
  <OPTION>選擇1_2</OPTION></SELECT> &nbsp; <SELECT class=select> <OPTION 
  selected>要美化的就加class</OPTION> <OPTION>選擇2_1</OPTION> 
  <OPTION>選擇2_22_22_22_2</OPTION> <OPTION>選擇2_22_22_22_3</OPTION></SELECT> 
<BR><BR><BR><SELECT class=select> <OPTION value=3_1 
  selected>拿這一只來證明取值和取文字都沒有問題</OPTION> <OPTION value=3_2>選擇3_22_22_22_2</OPTION> 
  <OPTION value=3_3>選擇3_22_22_22_3</OPTION> <OPTION 
  value=3_4>選擇3_22_22_22_4</OPTION> <OPTION value=3_5>選擇3_22_22_22_5</OPTION> 
  <OPTION value=3_6>選擇3_22_22_22_6</OPTION> <OPTION 
  value=3_7>選擇3_22_22_22_7</OPTION> <OPTION value=3_8>選擇3_22_22_22_8</OPTION> 
  <OPTION value=3_9>選擇3_22_22_22_9</OPTION> <OPTION 
  value=3_10>選擇3_22_22_22_10</OPTION> <OPTION 
  value=3_11>選擇3_22_22_22_11</OPTION> <OPTION 
  value=3_12>選擇3_22_22_22_12</OPTION> <OPTION 
  value=3_13>選擇3_22_22_22_13</OPTION> <OPTION 
  value=3_14>選擇3_22_22_22_14</OPTION> <OPTION 
  value=3_15>選擇3_22_22_22_15</OPTION> <OPTION 
value=3_16>選擇3_22_22_22_16</OPTION></SELECT> </FORM>
<SCRIPT>
function getValue() {
	var kk = document.getElementsByTagName('select')[2];
	return kk.options[kk.selectedIndex].value;
}
function getTxt() {
	var kk = document.getElementsByTagName('select')[2];
	return kk.options[kk.selectedIndex].innerHTML;
}
</SCRIPT>
<BR><BR>
<A onclick=alert(getValue()); href="#;">取第三個的值</A> 
<A onclick=alert(getTxt()); href="#;">取第三個的文本</A> 
</BODY></HTML>

前一頁:凹陷文字

后一頁:靜態頁面在文本框中輸入數字，表格直接算出相應的結果

相關閱讀: 最新縣及縣以上1980年以來歷史行政區劃代碼大全截止2018年3月31日; 留言板留言板V7.0; python加Appium判斷滑動是否到達屏幕底部; 獲取客戶真實IP地址; 亂涂; 利用JavaScript獲取現在時間日期與農歷; 利用css設置div漂浮在底部或頂部; flash利用as調用執行外部設置的exe文件

共有0條關于《用javascript美化Select,并獲取相應的值》的評論: 發表評論

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

返回頂部發表評論

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

網友評論聲明,請自覺遵守互聯網相關政策法規。

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

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

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

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

更多>>隨機抽取信息: 北京青年旅行社股份有限公司; 吉林省文化國際旅行社有限公司; 深山旅行社網站管理系統 v1.6; 利用css3中的-webkit-font-smoothing把網頁文字的毛邊去掉; asp讀取163的rss之xml數據; 總結一下with open()和open()的區別與使用方法

更多標簽熱門標簽

窗口復選框 table 灰色 imprt 分開 163 游戲百度高亮版權光標加長路徑控制 FlashFxp 翻轉十字 V3.1 統計 html 判斷 FTP font-size 夢幻獲取 innerHTML lightbox dt 保護眼睛的電腦色教程寬邊界重疊生成層設為首頁字體繁體 onload 行號屏幕適應效果文件類型默認高度 Java 告滑過網易工具

行業解決方案: 抖音小程序百度小程序微信小程序

了解我們: 關于深山; 業務范圍; 案例展示中心; 聯系我們; 網站地圖; 贊助深山

動態展示: 定制網絡投票系統; 定制小程序

服務熱線: 13961347334

: 微信公眾號二維碼

: 百度小程序二維碼

: 頭條抖音小程序二維碼

: 聯系微信二維碼

: 聯系QQ二維碼

免責聲明:本站所有資料信息,有部分為本人原創,部分為從網絡收集而來,僅供網友查看閱讀所用,所有信息版權歸信息所有人或所有公司所有
如果信息內容侵犯到您的版權或權益請與我們聯系,經確認后我們會立即移除相關內容或鏈接
Copyright © 2007-2025 深山工作室 All Rights Reserved
服務QQ:565449214 手機:13961347334
ICP備案:蘇ICP備15019627號

蘇公網安備 32070502010230號

88国产精品视频一区二区三区