当前位置: 代码迷 >> Web前端 >> 可选可输入上拉框jquery插件(非div+text输入框实现)
  详细解决方案

可选可输入上拉框jquery插件(非div+text输入框实现)

热度:87   发布时间:2012-10-07 17:28:51.0
可选可输入下拉框jquery插件(非div+text输入框实现)
	//实现原理使用输入框覆盖在select框的上面,在ie6、ie7、firebox下测试通过。
		$.fn.selectbox = function(){
			//用变量idm存储select的id或name
			var idm = $(this).attr("id") || $(this).attr("name");

			if($("#" + idm + "div").length <= 0){//判断动态创建的div是否已经存在,如果不存在则创建
				var divHtml = "<div style='display:none' id='" + idm + "div'><input type='text' id='" + idm + "inputText'/></div>";
				$(this).attr("tabindex",-1).after(divHtml);
				$("#" + idm + "div").css({position:"absolute",top:$(this).position().top -1 ,left:$(this).position().left}).show();
				$("#" + idm + "inputText").val($(this).val()).css({width:$(this).width()-13,height:$(this).height() + 4});
				//select注册onchange事件
				$(this).change(function(){
						$("#" + idm + "inputText").val($(this).val());	
				})				
			}
			//解决ie6下select浮在div上面的bug
			$("#" + idm + "div").bgIframe();
			return $("#" + idm + "inputText").val();
		}?
1 楼 4268146 2011-05-06  
是吗?我先看看,以前用的是select + text ,还带自动提示。呵
2 楼 cremains 2011-05-13  
在Chrome下的样式,,不是一般的难看啊。。。
3 楼 justinyao 2011-05-13  
不错,感觉很多业务都需要这个,谢谢分享
4 楼 liu400liu 2011-05-13  
cremains 写道
在Chrome下的样式,,不是一般的难看啊。。。

没测过Chrome下的情况!
5 楼 pch272215690 2011-06-16  
数据回显不太好搞啊,select元素总是在最上面显示。
6 楼 openFox 2011-06-27  
pch272215690 写道
数据回显不太好搞啊,select元素总是在最上面显示。

嗯,LZ在加个自动提示就更好了
7 楼 liu400liu 2011-06-27  
openFox 写道
pch272215690 写道
数据回显不太好搞啊,select元素总是在最上面显示。

嗯,LZ在加个自动提示就更好了

这个下拉的,我觉得适合数据量小的应用,所以没有必要自动提示。自动提示的应该都是数据比较多的,那就不适合再下啦了。
  相关解决方案