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>