使用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}

赞 (0)

相关推荐

  • lyhucSelect基于Jquery的Select数据联动插件

    lyhucSelect基于Jquery的Select数据联动插件

    数据源: 复制代码 代码如下: var areaInfo = new Array(); areaInfo[0] = new Array(); areaInfo[0][0]="1"; areaInfo[0][1]="Beijing"; areaInfo[0][2]="0"; areaInfo[0][3]="0"; areaInfo[1] = new Array(); areaInfo[1][0]="2"; a

  • jquery通过select列表选择框对表格数据进行过滤示例

    jquery通过select列表选择框对表格数据进行过滤 表格数据 复制代码 代码如下: <table id="example">    <thead>        <tr>            <th>Name</th>            <th>Surname</th>        </tr>    </thead>    <tbody>       

  • jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

    jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

    select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自

  • jquery Ajax实现Select动态添加数据

    jquery Ajax实现Select动态添加数据,具体内容如下 1.背景  最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示.但是,这次要实现select与别的选项框联动,也就是要动态添加option数据.查阅了很多资料,终于搞定.下面就分享一下,如何利用jQuery和Ajax实现select动态添加数据. 2.本文代码实现的是车辆型号根据车辆品牌联动显示的功能.首先,是jsp中的车辆品牌定义,这个很简单.如下:

  • 使用CSS和jQuery模拟select并附提交后取得数据的代码

    使用CSS和jQuery模拟select并附提交后取得数据的代码

    模拟select 并带有提交后取得数据的代码  HTML Code 复制代码 代码如下: <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#" rel="2">北京</a></li> <li><a href="#" rel="3">上海

  • jquery模拟SELECT下拉框取值效果

    jquery模拟SELECT下拉框取值效果

    jquery模拟SELECT框,效果图如下:   复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-sty

  • jquery 获取select数组与name数组长度的实现代码

    jquery 获取select数组与name数组长度的实现代码 可以用size() 或者options.length $("#name")[0].options.length;或document.getelementbyid("#name").options.length; $("#name option").size() name: $("select[name=name]").size(); option: $("

  • 用jQuery模拟select下拉框的简单示例代码

    用jQuery模拟select下拉框的简单示例代码

    很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • jQuery模拟select实现下拉菜单功能

    jQuery模拟select实现下拉菜单功能

    用jquery模拟一淘上面的搜索下拉的功能,利用css3做箭头的动画效果. JS代码: /* * 模拟搜索下拉select * 默认调用方式:$(el).setSelect({ * optionList: [], //这里是下拉的选项,如['aa','bb'] * hiddenInput: '#optionHidden', //隐藏的input获取选中后的值,供表单提交时传值 * getOption: '#sOptionBtn', * callback: function(option){} *

  • css配合jquery美化 select

    css配合jquery美化 select

    一个简单的css配合jq美化select   复制代码 代码如下: <div id="main"> <section id="basic-usage"> <select id="basic-usage-demo"> <option value="">请选择-</option> <option>1</option> <option>2

  • 基于jquery实现select选择框内容左右移动添加删除代码分享

    基于jquery实现select选择框内容左右移动添加删除代码分享

    本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图:                                  ----------------------查看效果----------------------- 小提示:浏览

  • jQuery通过ajax快速批量提交表单数据

    当表单数据项很多时,手动获取表单项的值将变得效率低下,结合jQuery提供的函数serialize(),我们可以实现快速获取数据并提交表单数据. 请看下面的表单: <form id="fm"> <table> <tr> <td>姓名</td> <td> <input type="text" name="name" /> </td> </tr>

  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后

随机推荐