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>
分享到:
相关推荐
简单javavscript实现的可输入下拉框(仿VC的comobox),用于html网页开发。 不懂代码的,可直接在页面中插入该源码实现,方便易用。
js 可输入 下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框
可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框 可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框
将CheckBox Text两个空间结合,简易的制作可输入下拉框
可输入下拉框(select)源代码 可输入下拉框(select)源代码 select下拉框中可输入内容
可输入下拉框,在IE 中没问题,在chrom中有点小问题。
NULL 博文链接:https://362217990.iteye.com/blog/846431
可输入下拉框 源码 下拉框 百度 google
利用input框和select框的组合设计的可输入下拉框,并支持键盘按钮实现上下移动。
仿百度google的自动搜索可输入下拉框, 本人开发的, 网上的都不好用,郁闷,提手花了一天半呢
这是一个可以输入的下拉框组件,同时支持按首字检索功能
该下拉框 可输入文字、可下拉选择选项、外观与下拉框一致
网页里没有专门的可输入的带筛选的的下拉框,这个算是一个弥补 希望对大家有帮助,支持鼠标和键盘操作,单仍有小BUG(如果你能发现的话),源码以及使用方法奉上
插件+Demo+源码 亲测可用! 可输入的下拉框,支持自动完成模糊查询,等方便功能
可编辑的下拉框 既可以编辑,又可以下拉选择 很不错的
实现可以编辑的下拉框,比android原生的Spinner控件好用多了..
这是我在网上搜集的已经测试...实例实现了,Asp.net中应用Jquery FlexBox实现可输入,可选择的下拉框。而且可以自动从数据库中匹配数据,实现自能提示效果。 源码下载地址:http://bbs.wolefa.com/showtopic-134.html
可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...