DIV模拟select下拉菜单效

// 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、height var left = jQuery("#" + name).offset().left; var height = jQuery("#" + name).height(); var width = jQuery("#" + name).width()+3; var option_open = false; //标记是否打开下拉option function __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循环填充option for(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;} //显示下拉option function __hide_option(){jQuery("#_li_" + name).hide();option_open=false;jQuery(document).unbind("click",__hide_option);} //隐藏下拉option jQuery("#" + 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>

DIV模拟select下拉菜单效

猜你喜欢