从网上找来的,感觉不错就拿来分享下
<style type="text/css"> body, ul, li { margin: 0; padding: 0; font-size: 13px; } ul, li { list-style: none; } #divselect { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } #divselect cite { width: 150px; height: 24px; line-height: 24px; display: block; color: #807a62; cursor: pointer; font-style: normal; padding-left: 4px; padding-right: 30px; border: 3px solid #333333; background: url(xjt.png) no-repeat right center; } #divselect ul { width: 184px; border: 1px solid #333333; background-color: #ffffff; position: absolute; z-index: 20000; margin-top: -1px; display: none; } #divselect ul li { height: 24px; line-height: 24px; } #divselect ul li a { display: block; height: 24px; color: #333333; text-decoration: none; padding-left: 10px; padding-right: 10px; } #divselect ul li a:hover { background-color: #CCC; } p { margin: 10px auto; width: 920px; } #n { margin: 10px auto; width: 920px; border: 1px solid #CCC; font-size: 12px; line-height: 30px; } #n a { padding: 0 4px; color: #333; } </style>
<form id="form1"action="" method="post"> <div id="divselect" class="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> <br /> <div id="divselect" class="divselect1"> <cite>请选择特效分类</cite> <ul> <li><a href="javascript:;" selectid="6">导航</a></li> <li><a href="javascript:;" selectid="7">下拉</a></li> <li><a href="javascript:;" selectid="8">模拟</a></li> <li><a href="javascript:;" selectid="9">特效</a></li> <li><a href="javascript:;" selectid="10">下拉特效</a></li> </ul> </div> <input name="" value="" id="inputselect"/> //获取的数据 </form> <input type="button" value="get" onclick="get()" />
$(function(){ $.divselect(".divselect", "#inputselect"); $.divselect(".divselect1", "#inputselect"); }); function get() { var dd = document.getElementById("inputselect"); alert(dd.value); }
下载示例代码 http://www.51xuediannao.com/js/jquery/divselect.html
原文:http://www.cnblogs.com/hjlost/p/3862805.html