javascript美化プルダウンリスト1

6364 ワード

<!DOCTYPE >
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript">
			var childCreate = false;
			function Offset(e)	{
				//        
				var t = e.offsetTop;
				var l = e.offsetLeft;
				var w = e.offsetWidth;
				var h = e.offsetHeight - 2;
				while ( e = e.offsetParent) {
					t += e.offsetTop;
					l += e.offsetLeft;
				}
				return {
					top : t,
					left : l,
					width : w,
					height : h
				}
			}

			function loadselect(obj) {
				//   :  select     
				var offset = Offset(obj);
				//   :   select  
				obj.style.display = "none";
				//   :    div    select
				var iDiv = document.createElement("div");
				iDiv.id = "selectof" + obj.name;
				iDiv.style.position = "absolute";
				iDiv.style.width = offset.width + "px";
				iDiv.style.height = offset.height + "px";
				iDiv.style.top = offset.top + "px";
				iDiv.style.left = offset.left + "px";
				iDiv.style.background = "url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";
				iDiv.style.border = "1px solid #ccc";
				iDiv.style.fontSize = "12px";
				iDiv.style.lineHeight = offset.height + "px";
				iDiv.style.textIndent = "4px";
				document.body.appendChild(iDiv);
				//   : select          
				var tValue = obj.options[obj.selectedIndex].innerHTML;
				iDiv.innerHTML = tValue;
				//   :      
				iDiv.onmouSEOver = function() {//    
					iDiv.style.background = "url('image/test.jpg') no-repeat right -6px";
				}
				iDiv.onmouseout = function() {//    
					iDiv.style.background = "url('image/test.jpg') no-repeat right -6px";
				}
				iDiv.onclick = function() {//    
					if (document.getElementById("selectchild" + obj.name)) {
						//       div
						if (childCreate) {
							//              ,          。       。
							document.getElementById("selectchild" + obj.name).style.display = "none";
							childCreate = false;
						} else {
							document.getElementById("selectchild" + obj.name).style.display = "";
							childCreate = true;
						}
					} else {
						//    div     div  , options   。
						var cDiv = document.createElement("div");
						cDiv.id = "selectchild" + obj.name;
						cDiv.style.position = "absolute";
						cDiv.style.width = offset.width + "px";
						cDiv.style.height = obj.options.length * 20 + "px";
						cDiv.style.top = (offset.top + offset.height + 2) + "px";
						cDiv.style.left = offset.left + "px";
						cDiv.style.background = "#f7f7f7";
						cDiv.style.border = "1px solid silver";
						var uUl = document.createElement("ul");
						uUl.id = "uUlchild" + obj.name;
						uUl.style.listStyle = "none";
						uUl.style.margin = "0";
						uUl.style.padding = "0";
						uUl.style.fontSize = "12px";
						cDiv.appendChild(uUl);
						document.body.appendChild(cDiv);
						childCreate = true;
						for (var i = 0; i < obj.options.length; i++) {
							//    select    options   li 
							var lLi = document.createElement("li");
							lLi.id = obj.options[i].value;
							lLi.style.textIndent = "4px";
							lLi.style.height = "20px";
							lLi.style.lineHeight = "20px";
							lLi.innerHTML = obj.options[i].innerHTML;
							uUl.appendChild(lLi);
						}
						var liObj = document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
						for (var j = 0; j < obj.options.length; j++) {
							// li        
							liObj[j].onmouseover = function() {
								this.style.background = "gray";
								this.style.color = "white";
							}
							liObj[j].onmouseout = function() {
								this.style.background = "white";
								this.style.color = "black";
							}
							liObj[j].onclick = function() {
								//     ,             select   ,                 select   。
								obj.options.length = 0;
								obj.options[0] = new Option(this.innerHTML, this.id);
								//           。
								document.getElementById("selectchild" + obj.name).style.display = "none";
								childCreate = false;
								iDiv.innerHTML = this.innerHTML;
							}
						}
					}
				}
			}
		</script>
		<style type="text/CSS">
			select {
				width: 200px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<form name="f">

			<select id="PRovince" name="province">
				<option value="10">  </option>
				<option value="11">  </option>
				<option value="12">  </option>
				<option value="13">  </option>
				<option value="13">  </option>
				<option value="13">  </option>
				<option value="13">  </option>
				<option value="13">  </option>
				<option value="13">  </option>
				<option value="13">  </option>
				<option value="13">  </option>
				<option value="13">  </option>
			</select>
		</form>
		<script type="text/javascript">
			loadselect(document.f.province);
		</script>

	</body>
</html>