div模拟select/option解决兼容性问题及增加可拓展性

想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此导致在IE8及以下版本浏览器中的各种问题。

这个模拟思路很简单,也很清晰,我就直接上代码了

html:

第一层div是模拟select标签,第二层div是模拟option下拉列表

1 <div>
2     <div class="sim-select"></div>
3 </div>
4 <div class="sim-downList">
5
6 </div>

css:

这个按需求可自己随意扩展随意调

1 .sim-select { height: 30px; line-height: 30px; border: solid 2px #f0f0f0;}
2 .sim-downList {line-height: 30px; border: solid 1px #d9d9d9; display: none; }
3 .sim-option {
4   &:hover { background-color: red; cursor: pointer;}
5 }

js:

Ps:记得引用jq库

我是自己模拟的types数据,可以添加form,拓展为获取后台数据等。

 1 var types = [{name:"选择11111"},{name:"选择222222"},{name:"选择333333"},{name:"选择4444444"},{name:"选择55555"}];
 2         var $select = $(".sim-select"),$downList = $(".sim-downList"), i,$length = types.length;
 3         for(i=0;i<$length;i++) {
 4             $downList.append("<div class=‘sim-option‘>" + types[i].name + "</div>")
 5         }
 6         $select.text(types[0].name);
 7         $select.click(function () {
 8
 9             if($downList.is(":visible")){
10                 $downList.hide();
11             }
12             else {
13                 $downList.show();
14             }
15         });
16         $(".sim-option").click(function () {
17             var _this = this;
18             var text = _this.textContent;
19             $select.text(text);
20         })

具体效果:

以上纯属本人的拙见,恳请指出不足之处,共勉。^_^

时间: 2024-11-05 18:35:21

div模拟select/option解决兼容性问题及增加可拓展性的相关文章

div模拟select下拉菜单效果

有些时候select下拉菜单直接用css调整样式,可能会有兼容性的问题,尤其是右侧的下拉三角,很难用css控制,那怎么办呢?可以采用div模拟select下拉菜单的效果.先直接上代码了: HTML的结构如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>div模拟下拉菜单特效</title> <style type="t

div 模拟&lt;select&gt;事件

IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> <meta charset="utf-8"> <title>div模拟select</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js&

div模拟 select 或者 其他表单组件

1 <form action="" method="post"> 2 <div id="divselect"> 3 <cite>请选择特效分类</cite> 4 <ul> 5 <li><a href="javascript:;" selectid="1">导航菜单</a></li> 6 <li&

用div,ul,input模拟select下拉框

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>案例测试</title> 6 <link rel="stylesheet" href="css/all.css" /> 7 <script type="text/javascript" src=&

IE8 下 select option 内容过长 , 展开时信息显示不全解决办法

1 IE8 下 select option 内容过长 , 展开时信息显示不全 , 简单折衷的方式就是给 option 加上 title 属性 , 2 但是又不想一个个的修改,怎么办呢,代码如下 : 3 4 //select option bind title 5 $(document).delegate('select', 'mouseover', function() 6 { 7 var $this = $(this); 8 if($this.data('data-bind-title'))

jquery双向列表选择器DIV模拟版

前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器DIV模拟</title> <script type="text/javascript&quo

jquery模拟select选择框

直接贴代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟select框</title> <style> * { margin: 0; padding: 0; } body { font-family: 微软雅黑; } ul, ul li { list-style: none; } #

模拟select控件&amp;&amp;显示单击的坐标&amp;&amp;用户按下键盘,显示keyCode

<!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-

Jquery获取select option动态添加自定义属性值失效

Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/39096/390963333.html 为了帮助网友解决“Jquery获取select optio”相关的问题,中国学网通过互联网对“Jquery获取select optio”相关的解决方案进行了整理,用户详细问题包括:jqueryselectie9  function GetFenceItemData(