欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

可输入的下拉框

程序员文章站 2022-07-08 23:02:38
...
var Select = {
	isOpera :(navigator.userAgent.toLowerCase().indexOf('opera') != -1),
	isIE : (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && !this.isOpera),
	isIE6 : (navigator.userAgent.toLowerCase().indexOf("msie 6.0") != -1),
	isSafari : (navigator.userAgent.toLowerCase().indexOf('safari') != -1),
	getElementPos : function(el){
		if (el.parentNode === null || el.style.display == 'none') {
			return false;
		}
		var parent = null;
		var pos = [];
		var box;
		if (el.getBoundingClientRect) { // IE
			box = el.getBoundingClientRect();
			var scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
			var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
			return {
				x : box.left + scrollLeft,
				y : box.top + scrollTop
			};
		} else if (document.getBoxObjectFor) { // gecko
			box = document.getBoxObjectFor(el);
			var borderLeft = (el.style.borderLeftWidth)	? parseInt(el.style.borderLeftWidth): 0;
			var borderTop = (el.style.borderTopWidth)? parseInt(el.style.borderTopWidth): 0;
			pos = [box.x - borderLeft, box.y - borderTop];
		} else { // safari & opera
			pos = [el.offsetLeft, el.offsetTop];
			parent = el.offsetParent;
			if (parent != el) {
				while (parent) {
					pos[0] += parent.offsetLeft;
					pos[1] += parent.offsetTop;
					parent = parent.offsetParent;
				}
			}
			if (this.isOpera|| (this.isSafari && el.style.position == 'absolute')) {
				pos[0] -= document.body.offsetLeft;
				pos[1] -= document.body.offsetTop;
			}
		}
		if (el.parentNode) {
			parent = el.parentNode;
		} else {
			parent = null;
		}
		while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { 
			pos[0] -= parent.scrollLeft;
			pos[1] -= parent.scrollTop;
			if (parent.parentNode) {
				parent = parent.parentNode;
			} else {
				parent = null;
			}
		}
		return {
			x : pos[0],
			y : pos[1]
		};
	},
	inittextfield : function(el){
		var selectWidth = el.offsetWidth;
		textfield = document.createElement("input");
		var txtid = "txt"+ el.id;
		textfield.id = txtid;
		textfield.style.zIndex = "99999";
		if (el.value == "") {
			textfield.value = "输入或选择";
			textfield.style.color = "#ccc";
		} else {
			textfield.value = el.value;
		}
		textfield.style.position = "absolute";
		textfield.style.top = this.getElementPos(el).y + "px";
		textfield.style.left = this.getElementPos(el).x + "px";
		textfield.style.border = "none";
		if (this.isSafari) {
			var selectButtonWidth = 18;
			textfield.style.marginTop = "0px";
			textfield.style.marginLeft = "0px";
		} else if (this.isOpera) {
			var selectButtonWidth = 27;
			textfield.style.marginTop = "4px";
			textfield.style.marginLeft = "4px";
		} else {
			if(this.isIE6)
				this.initIframe(el);
			var selectButtonWidth = 27;
			textfield.style.marginTop = "2px";
			textfield.style.marginLeft = "3px";
		}
		textfield.style.width = (selectWidth - selectButtonWidth) + "px";
		el.parentNode.appendChild(textfield);
		el.onchange = function() {
			val = this.options[this.selectedIndex].value;
			document.getElementById(txtid).value = val;
		}
		el.onfocus = function() {
			document.getElementById(txtid).style.color = "#333";
		}
		textfield.onfocus = function() {
			this.style.color = "#333";
			this.select();
		}
		textfield.onchange = function() {
			el.options[0].value = el.options[0].text = document.getElementById(txtid).value;
			el.options[0].selected = true;
		}
	},
	//解决IE6下面的问题
	initIframe : function(el) {
		var textWidth = el.offsetWidth;
		var textHeight = el.offsetHeight;
		var hackFrame = document.createElement("iframe");
		hackFrame.setAttribute("src", "about:blank");
		hackFrame.setAttribute("scrolling", "0");
		hackFrame.setAttribute("tabindex", "-1");
		hackFrame.id = "frame" + el.name;
		hackFrame.style.position = "absolute";
		hackFrame.style.width = textWidth -25+ "px";
		hackFrame.style.height = textHeight-5 + "px";
		hackFrame.style.top = this.getElementPos(el).y + "px";
		hackFrame.style.left = this.getElementPos(el).x + "px";
		hackFrame.style.marginTop = "3px";
		hackFrame.style.marginLeft = "3px";
		el.parentNode.insertBefore(hackFrame, el);
	}
}



<!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=UTF-8"/>
<title>可输入的下拉框 - clone(http://hi.baidu.com/hulk168)</title>
<script type="text/javascript" src="select.js" charset="gb2312"></script>
</head>
<body>




<select id="user_fromto" style="width: 90px;">
	<option value=""></option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广州">广州</option>
	<option value="深圳">深圳</option>
	<option value="重庆"  >重庆</option>
	<option value="武汉">武汉</option>
	<option value="成都">成都</option>
	<option value="长沙">长沙</option>
	<option value="济南">济南</option>
	<option value="大连">大连</option>
	<option value="杭州">杭州</option>
	<option value="苏州">苏州</option>
</select>
     
	 
<select id="user_fromto1" style="width: 90px;">
  <option value=""></option>
  <option value="上海">上海</option>
  <option value="广州">广州</option>
  <option value="深圳">深圳</option>
  <option value="重庆">重庆</option>
  <option value="武汉">武汉</option>
  <option value="成都">成都</option>
  <option value="长沙">长沙</option>
  <option value="济南">济南</option>
  <option value="大连">大连</option>
  <option value="杭州">杭州</option>
  <option value="苏州">苏州</option>
</select>

<script type="text/javascript">
window.onload = function(){
	Select.inittextfield(document.getElementById("user_fromto"));
	Select.inittextfield(document.getElementById("user_fromto1"));
}
</script>
</body>
</html>