div模拟下拉菜单select控件模块 css实现表单select美化

     div css模拟实现form表单下拉select控件美化与功能实现。可以实现模拟的select表单下拉提交数据传值功能

    使用方法与调用方式：$.divselect("#divselect","#inputselect"); "#divselect" 这是哪个模拟列表的盒子的ID，"#inputselect"这个是选择以后给 id="inputselect" 的input隐藏域赋值的哦。 懂一点程序的都明白为啥要赋值了。意思就是给这个隐藏域赋值就相当于用丑陋的select下拉列表得到一个值是同理的。下拉列表的功能无非也就是传一个值提交过去。

     此form select下拉控件是使用div+jq+css实现，其表单功能正常使用，能正常传值。根据需要修改css背景、css宽度、css高度等图片或css样式实现自己想要的select下拉菜单表单美化效果。

jquery插件代码如下：

jQuery.divselect = function(divselectid,inputselectid) { 
var inputselect = $(inputselectid); 
$(divselectid+" cite").click(function(){ 
var ul = $(divselectid+" ul"); 
if(ul.css("display")=="none"){ 
ul.slideDown("fast"); 
}else{ 
ul.slideUp("fast"); 
} 
}); 
$(divselectid+" ul li a").click(function(){ 
var txt = $(this).text(); 
$(divselectid+" cite").html(txt); 
var value = $(this).attr("selectid"); 
inputselect.val(value); 
$(divselectid+" ul").hide(); 
 
}); 
}; 

div模拟下拉菜单(select)jquery插件调用方法如下：

<script type="text/javascript"> 
$(function(){ 
$.divselect("#divselect","#inputselect"); 
}); 
</script> 

对应HTML源代码片段如下：

<form action="" method="post"> 
<div id="divselect"> 
<cite>请选择特效分类</cite> 
<ul> 
<li><a href="javascript:;" selectid="1">导航菜单</a></li> 
<li><a href="javascript:;" selectid="2">下拉select效果</a></li> 
<li><a href="javascript:;" selectid="3">select模拟</a></li> 
<li><a href="javascript:;" selectid="4">DIVCSS5特效</a></li> 
<li><a href="javascript:;" selectid="5">jquery 下拉菜单特效</a></li> 
</ul> 
</div> 
<input name="" type="hidden" value="" id="inputselect"/> 
 
</form> 

收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
微信打赏