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>