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>