jquery实现模拟select下拉框效果
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>DIV模拟select下拉菜单</title>
- <style type="text/css">
- .mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}
- .mod_select ul{margin:0;padding:0;}
- .mod_select ul li{list-style-type:none;float:left;margin-left:20px;height:24px;}
- .select_label{color:#982F4D;float:left;line-height:24px;padding-right:10px;font-size:12px;font-weight:700;}
- .select_box{float:left;border:solid 1px #EDE7D6;color:#444;position:relative;cursor:pointer;width:165px;background:url(../select_bg.jpg) repeat-x;font-size:12px;}
- .selet_open{display:inline-block;border-left:solid 1px #E5E5E5;position:absolute;right:0;top:0;width:30px;height:24px;background:url(../select_up.jpg) no-repeat center center;}
- .select_txt{display:inline-block;padding-left:10px;width:135px;line-height:24px;height:24px;cursor:text;overflow:hidden;}
- .option{width:165px;;border:solid 1px #EDE7D6;position:absolute;top:24px;left:-1px;z-index:2;overflow:hidden;display:none;}
- .option a{display:block;height:26px;line-height:26px;text-align:left;padding:0 10px;width:100%;background:#fff;}
- .option a:hover{background:#FDE0E5;}
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".select_box").click(function(event){
- event.stopPropagation();
- $(this).find(".option").toggle();
- $(this).parent().siblings().find(".option").hide();
- });
- $(document).click(function(event){
- var eo=$(event.target);
- if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
- $('.option').hide();
- });
- /*赋值给文本框*/
- $(".option a").click(function(){
- var value=$(this).text();
- $(this).parent().siblings(".select_txt").text(value);
- $("#select_value").val(value)
- })
- })
- </script>
- </head>
- <body>
- <div class="mod_select">
- <ul>
- <li>
- <span class="select_label">sort buy:</span>
- <div class="select_box">
- <span class="select_txt"></span><a class="selet_open"><b></b></a>
- <div class="option">
- <a>1</a>
- <a>2</a>
- <a>3</a>
- </div>
- </div>
- <br clear="all" />
- </li>
- <li>
- <span class="select_label">View:</span>
- <div class="select_box">
- <span class="select_txt"></span><a class="selet_open"></a>
- <div class="option">
- <a>1</a>
- <a>2</a>
- <a>3</a>
- </div>
- </div>
- </li>
- </ul>
- <input type="hidden" id="select_value" />
- </div>
- </body>
- </html>
复制代码
jquery实现模拟select下拉框效果的更多相关文章
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)
效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- jQuery操作选中select下拉框的值
js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 ...
- jq插件又来了,模拟select下拉框,支持上下方向键哦
好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...
- 用div,ul,input模拟select下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- ul -- li 模拟select下拉框
在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...
- jQuery动态生成<select>下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
随机推荐
- VS2013的安装与测试
第一步:下载完成之后点击安装,在安装过程中会出现很多选择,选择社区版(c++),安装完成: 第二步:安装完成之后打开VS2013,如图所示: 第三步:按以下步骤进行 第四步:点击[OK]之后 第五 ...
- Apache修改了配置文件中的路径后,登录该地址网页出现问题 (其中介绍了selinux的域和安全上下文)
默认的网站数据存放在: /var/www/html 首页名称: index.html Apache服务程序的主配置文件: /etc/httpd/conf/httpd.conf (若是将 119 行 ...
- Drools解决积分问题
http://blog.csdn.net/quzishen/article/details/6163012 http://www.cnblogs.com/ityouknow/p/7297524.htm ...
- 使用phantomjs进行无界面UI自动化测试
PhantomJS(http://phantomjs.org/) 是一个基于WebKit的服务器端JavaScript API.它全面支持web而不需浏览器支持,其快速.原生支持各种Web标准:DOM ...
- 使用 TListView 控件(4)
本例效果图: 代码文件: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, ...
- mybatis之关联(2)
MapperAssoDao.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE map ...
- 【版本管理】git分支管理
创建与合并分支: 首先,我们创建dev分支,然后切换到dev分支: git checkout -b dev,命令加上-b参数表示创建并切换, 相当于以下两条命令: git branch dev: gi ...
- 基于Vue-cli 快速搭建项目
Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架.下面我说一下vue-cli的使用方法. 一.准备工作 在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装v ...
- [代码]--IIS发布网站浏览之后看到的是文件目录 & Internal Server Error 处理程序“ExtensionlessUrlHandler-ISAPI-4.0_64bit”在其模块列表中有一个错误模块“IsapiModule” 解决方法 & App_global.asax.pduxejp_.dll”--“拒绝访问。 ”
Q:IIS发布网站浏览之后看到的是文件目录 A:它出现了一个说到.NET4.0 更高框架什么的错误,所以我将 .NTE CRL版本由4.0改为2.0了,改为2.0后就出现了只能浏览文件目录了.改为4. ...
- MySQL存储引擎 - Myisam和Innodb
Mysql有两种存储引擎:InnoDB与Myisam,下表是两种引擎的简单对比 MyISAM InnoDB 构成上的区别: 每个MyISAM在磁盘上存储成三个文件.第一个 文件的名字以表的名字开始 ...