DIV模拟select下拉菜单效

来源：互联网发布：土鳖不土战斗力五知乎编辑：程序博客网时间：2024/04/30 03:41

// JavaScript Document//*********************************************************************************************///文件名:jquery.plugin_costom.js//功能：用于存储自定义的jquery 插件//addby: zc 2011-15-19//*********************************************************************************************//**********************************************************************************************//DIV模拟select下拉菜单效果//参数说明：//name:input文本框ID//value:input文本框ID//data:select显示的数据各位为 var option = [['显示名1','值1'],['显示名1','值1'],['显示名2','值2'],['显示名3','值3']];////调用说明：需要2个input, 1个type=text 和type=hidden(程序里未强行定义type值)//type=text 模拟option.text 显示参数name值，用户可见//type=hidden 模拟option.value显示参数value值，用户不可见////***********************************************************************************************/jQuery.dmSelect = function(name,value,data){//jQuery("#" + name).attr("readonly","readonly"); //设置控件只读var top = jQuery("#" + name).offset().top; //获取控件top、left位置和width、heightvar left = jQuery("#" + name).offset().left;var height = jQuery("#" + name).height();var width = jQuery("#" + name).width()+3;var option_open = false; //标记是否打开下拉optionfunction __dropheight(l){var h;if(l>10 || l<1){h = 10 * 15;}else{h = l * 15; 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循环填充optionfor(var i = 0;i < data.length; i++){div_html += "<div style="text-align:left;padding-left:5px;cursor:pointer;" mce_style="text-align:left;padding-left:5px;cursor:pointer;" value='" + data[i][1] + "'>" + data[i][0] + "</div>";}div_html += "</div>";jQuery("#" + name).after(div_html); //添加到input控件后面function __open_option(){jQuery("div[id^='_li_']").hide();jQuery("#_li_" + name).show();option_open=true;} //显示下拉optionfunction __hide_option(){jQuery("#_li_" + name).hide();option_open=false;jQuery(document).unbind("click",__hide_option);} //隐藏下拉optionjQuery("#" + name).click(function(event){if(option_open){__hide_option();}else{__open_option();jQuery(document).bind("click",__hide_option)}event.stopPropagation();});jQuery("#_li_" + name + " > div").hover(function(){jQuery(this).css({"background-color":"#CCCCCC"});},function(){jQuery(this).css({"background-color":"#FFFFFF"});}).click(function(){jQuery("#" + name).val(jQuery(this).html());jQuery("#" + value).val(jQuery(this).attr("value"));});};/**************DIV模拟select下拉菜单效果结束***********************************/

调用方法:

<textarea cols="50" rows="15" name="code" class="xhtml"><!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"><title></title><mce:script language="javascript" src="/javascript/jquery-1.4.4.min.js" mce_src="javascript/jquery-1.4.4.min.js"></mce:script><mce:script language="javascript" src="/javascript/jquery.plugin_custom.js" mce_src="javascript/jquery.plugin_custom.js"></mce:script>var option = [['显示名1','值1'],['显示名1','值1'],['显示名2','值2'],['显示名3','值3']];<mce:script type="text/javascript">function select_list(name,value){jQuery.dmSelect(name,value,option);}// --></mce:script><head><body> <input type="text" value="" id="123name" name="123name" style="width:80px; height:15px;" onfocus="select_list('123name','123value')" /> <input type="hidden" name="123value" id="123value" /></body></html></textarea>