Jquery实现div模拟Select控件

 

大家已经从实际使用中了解了jquery这个javascript框架的强大，其实jquery更加强大的是可扩展。你可以编写自己的基于jquery的插件，使你的代码功能更加简洁，也使程序员们更加轻松。。。

大家都知道在html中div和table是无法覆盖select和flash这样的window级别的元素，可是页面中我们不可能不使用浮动的div层，这样就导致用户体验不够好，一般情况下，我们会在显示浮动div层时把select和flash控件隐藏，这样暂时解决了浮动层的可观性，可是在隐藏了select和flash势必会让浏览者感觉到页面内容的变化。那我们是否可以使用其他控件来代替他们呢？

下面我们就来看一个小小的div模拟select控件的应用。。。

<script language="javascript" type="text/javascript">
var Options1 = [["00点","00"],["01点","01"],["02点","02"],["03点","03"],["04点","04"],["05点","05"],["06点","06"],["07点","07"],
    ["08点","08"],["09点","09"],["10点","10"],["11点","11"],["12点","12"],["13点","13"],["14点","14"],["15点","15"],
    ["16点","16"],["17点","17"],["18点","18"],["19点","19"],["20点","20"],["21点","21"],["22点","22"],["23点","23"]];
var Options2 = [["00分","00"],["15分","15"],["30分","30"],["45分","45"]];
<!--定义select列表项option-->
$.dmSelect = function(name,value,data){
 $("#" + name).attr("readonly","readonly");  //设置控件只读
 var top = $("#" + name).offset().top;   //获取控件top、left位置和width、height
 var left = $("#" + name).offset().left;
 var height = $("#" + name).height();
 var width = $("#" + name).width()+3;
 var option_open = false;      //标记是否打开下拉option
 function __dropheight(l){var h;if(l>10 || l<1){h = 10 * 20;}else{h = l * 20; h += 2;}return h;}  //计算下拉option显示高度
 var div_html = "<div id='_li_"+name+"' style='position:absolute;background-color:#FFFFFF;top:"+(top+height+5)+"px;left:"+left+"px;width:"+((width<30)?30:width)+"px;height:"+__dropheight(data.length)+"px;border:1px #666666 solid;overflow-x:hidden;overflow-y:auto;display:none;z-index:99999;'>";
 //for循环填充option
 for(var i = 0;i < data.length; i++){div_html += "<div style='text-align:left;padding-left:5px;' value='" + data[i][1] + "'>" + data[i][0] + "</div>";}
 div_html += "</div>";
 $("#" + name).after(div_html);  //添加到input控件后面
 function __open_option(){$("div[id^='_li_']").hide();$("#_li_" + name).show();option_open=true;}  //显示下拉option
 function __hide_option(){$("#_li_" + name).hide();option_open=false;$(document).unbind("click",__hide_option);}  //隐藏下拉option
 $("#" + name).click(function(event){if(option_open){__hide_option();}else{__open_option();$(document).bind("click",__hide_option)}event.stopPropagation();});
 $("#_li_" + name + " > div").hover(function(){$(this).css({"background-color":"#CCCCCC"});},function(){$(this).css({"background-color":"#FFFFFF"});})
 .click(function(){$("#" + name).val($(this).html());$("#" + value).val($(this).attr("value"));});
};
<!--实现div模拟select插件代码-->
$(document).ready(function(){
$.dmSelect("time_hour","hf_time_hour",Options1);
$.dmSelect("time_minute","hf_time_minute",Options2);
});
<!--调用方法-->
</script>

然后在页面body中添加如下input控件

<input type="text" id="time_hour" class="dropdown-select" />
<input type="hidden" id="hf_time_hour" />
<input type="text" id="time_minute" class="dropdown-select" />
<input type="hidden" id="hf_time_minute" />

后面的hidden隐藏控件只要是用来记录select选择的value值(value值不等同与text显示的值)

这个基于jquery的div模拟select下拉列表还有不足的地方，以后有时间再改进改进。

演示地址：http://www.js-blog.cn/demo/jq-select/jq-select.html