使用CSS和jQuery模拟select并附提交后取得数据的代码
更新时间：2013年10月18日 17:08:38 作者：
使用CSS和jQuery模拟select并实现提交后取得数据，详细实现及截图如下，感兴趣的朋友可以参考下
模拟select 并带有提交后取得数据的代码
HTML Code
<div id="dropdown">
<p>请选择城市</p>
<ul>
<li><a href="#" rel="2">北京</a></li>
<li><a href="#" rel="3">上海</a></li>
<li><a href="#" rel="4">武汉</a></li>
<li><a href="#" rel="5">广州</a></li>
</ul>
</div>
<div id="result"></div>
JavaScript Code
<script type="text/javascript">
$(function(){
$("#dropdown p").click(function(){
var ul = $("#dropdown ul");
if(ul.css("display")=="none"){
ul.slideDown("fast");
}else{
ul.slideUp("fast");
}
});
$("#dropdown ul li a").click(function(){
var txt = $(this).text();
$("#dropdown p").html(txt);
var value = $(this).attr("rel");
$("#dropdown ul").hide();
$("#result").html("您选择了"+txt+"，值为："+value);
});
});
</script>
CSS Code
#dropdown{width:186px; margin:100px auto; position:relative}
#dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat rightright 4px; color:#807a62; cursor:pointer}
#dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2; position:absolute; display:none}
#dropdown ul li{height:24px; line-height:24px; text-indent:10px}
#dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none}
#dropdown ul li a:hover{background:#c6dbfc; color:#369}
#result{margin-top:10px;text-align:center}
HTML Code
复制代码 代码如下:
<div id="dropdown">
<p>请选择城市</p>
<ul>
<li><a href="#" rel="2">北京</a></li>
<li><a href="#" rel="3">上海</a></li>
<li><a href="#" rel="4">武汉</a></li>
<li><a href="#" rel="5">广州</a></li>
</ul>
</div>
<div id="result"></div>
JavaScript Code
复制代码 代码如下:
<script type="text/javascript">
$(function(){
$("#dropdown p").click(function(){
var ul = $("#dropdown ul");
if(ul.css("display")=="none"){
ul.slideDown("fast");
}else{
ul.slideUp("fast");
}
});
$("#dropdown ul li a").click(function(){
var txt = $(this).text();
$("#dropdown p").html(txt);
var value = $(this).attr("rel");
$("#dropdown ul").hide();
$("#result").html("您选择了"+txt+"，值为："+value);
});
});
</script>
CSS Code
复制代码 代码如下:
#dropdown{width:186px; margin:100px auto; position:relative}
#dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat rightright 4px; color:#807a62; cursor:pointer}
#dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2; position:absolute; display:none}
#dropdown ul li{height:24px; line-height:24px; text-indent:10px}
#dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none}
#dropdown ul li a:hover{background:#c6dbfc; color:#369}
#result{margin-top:10px;text-align:center}
相关文章
本篇文章主要介绍了jQuery实用密码强度检测，这是一个非常常见的功能，可以验证密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。2017-03-03
jquery UI Datepicker时间控件的使用方法（基础版）
这篇文章主要介绍了jquery ui datepicker时间控件的使用方法，需要的朋友可以参考下2015-11-11
这篇文章主要介绍了jquery如何自定义表格样式，分别实现三种样式：默认状态（灰白相间），鼠标悬浮状态（绿色），鼠标点击状态（黄色），感兴趣的小伙伴们可以参考一下2015-11-11
由于placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。2015-06-06
本篇文章主要是对jquery弹出层居中效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了jquery.cookie实现的客户端购物车操作,结合实例形式分析了jQuery基于cookie存储及操作数据实现购物车功能的技巧,需要的朋友可以参考下2015-12-12
本篇文章主要介绍了jQuery中用on绑定事件时需注意的事项，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
本篇文章主要介绍了jquery仿苹果的时间/日期选择效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
1.2.0版本插件在1.0.0插件基础上进一步修改，版权信息仅保留致谢信息，删除作者为了代码整体提示美观度，故将jQuery官方两位数版本变更为三位数版本2011-07-07
这篇文章主要介绍了jquery自动切换tabs选项卡的具体实现，有需要的朋友可以参考一下2013-12-12
最新评论