css div 下拉框内容自适应,div+css模拟select下拉框

无标题文档

.mod_select ul{margin:0;padding:0;}

.mod_select ul:after{

display: block;

clear: both;

visibility: hidden;

height: 0;

content: '';

}

.mod_select ul li{list-style-type:none;float:left;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 #ccc;color:#444;position:relative;cursor:pointer;width:165px;font-size:12px;}

.selet_open{display:inline-block;border-left:solid 1px #ccc;position:absolute;right:0;top:0;width:30px;height:100%;background:url(xjt.png) no-repeat 10px 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 #ccc;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:#aaa;}

• sort buy:

  1

  1

  2

  3

$(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)

})

});

运行效果图：

jquery实现模拟select下拉框效果

/p>

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

jq插件又来了，模拟select下拉框，支持上下方向键哦

好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

ul -- li 模拟select下拉框

在写项目中 用到下拉框,一般用 &l ...

纯css实现select下拉框并排显示

& ...

css配合js模拟的select下拉框

css配合js模拟的select下拉框

随机推荐

原生JavaScript实现hasClass、addClass、removeClass、toggleClass

兼容IE6+,因IE6.IE7.IE8不支持Array.prototype.indexOf()和String.prototype.trim(),分别用Polyfill实现支持. 详细: indexOf ...

HBase之表状态

import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; impo ...

Docker之功能汇总

Docker-给容器做端口映射 基本的命令是 -P(大写) :Docker 会随机映射一个 49000~49900 的端口到内部容器开放的网络端口基本的命令是 -p(小写) :Docker则可以指定要 ...

class_create(),device_create自动创建设备文件结点

class_create(),device_create自动创建设备文件结点 从linux 内核2.6的某个版本之后,devfs不复存在,udev成为devfs的替代.相比devfs,udev有很多优 ...

csdn的下载链接token

qt之QComboBox定制 http://www.cnblogs.com/swarmbees/p/5710714.html http://download.csdn.net/detail/qq_30 ...

日期选择器——java

转载:http://zgdeng.iteye.com/blog/1405650 代码如下: import java.awt.BasicStroke; import java.awt.BorderLay ...

Java开发者必备的10大学习网站，送给入门学习java的你，请收下！

作为开发者来说,必备的除了对编码的热情还要有自己的一套技巧,另外不可缺少的就是平时学习的网站.以下本人收集的 Java 开发者必备的网站,这些网站可以提供信息.以及一些很棒的讲座 , 还能解答一般问题 ...

leetCode70.爬楼梯

假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...

B树与B+详解

承接上篇SQLite采用B树结构使得SQLite内存占用资源较少,本篇将讲述B树的具体操作(建树,插入,删除等操作).在看博客时,建议拿支笔和纸,一点一点操作,毕竟知识是自己的,自己也要消化的.本篇通 ...

Python-ConfigParser获取配置项名称大小写问题

C:\Python27\Lib\ConfigParser.py: def optionxform(self, optionstr): return optionstr.lower() 会将配置文件中的 ...