<!DOCTYPE html>
<html >
<head lang="zh">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="lib/jquery-1.11.3.min.js" type="text/javascript"></script>
    <style>
        .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;}
    </style>
</head>
<body>
<div class="mod_select">
    <ul>
        <li>
            <span class="select_label">sort buy:</span>
            <div class="select_box">
                <span class="select_txt">1</span><a class="selet_open"><b></b></a>
                <div class="option">
                    <a>1</a>
                    <a>2</a>
                    <a>3</a>
                </div>
            </div>
        </li>
    </ul>
    <input type="hidden" id="select_value" />
</div>
<script>
    $(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>
</body>
</html>

运行效果图：

												


											
div+css模拟select下拉框的更多相关文章
	

    
								
  1. jquery实现模拟select下拉框效果
		
    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...
    
		
    2. 
						
  2. 用div，ul，input模拟select下拉框
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
    
		
    3. 
						
  3. jq插件又来了，模拟select下拉框，支持上下方向键哦
		
    好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...
    
		
    4. 
						
  4. ul -- li 模拟select下拉框
		
    在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...
    
		
    5. 
						
  5. 纯css实现select下拉框并排显示
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    6. 
						
  6. [原创]HTML 用div模拟select下拉框
		
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns=" ...
    
		
    7. 
						
  7. 模拟select下拉框、复选框效果
		
    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
    
		
    8. 
						
  8. css配合js模拟的select下拉框
		
    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
    
		
    9. 
						
  9. 利用css新属性appearance优化select下拉框
		
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 在Linux CentOS上部署Asp.Net Core项目(Tengine、Asp.Net Core、Centos、MySql)
			
    一.前言 1.简单记录一下Linux CentOS 7中安装与配置Tengine的详细步骤. 2.简单比较一下Tengine 和Nginx 3.搭建Asp.net Core和部署 Web程序 4.总结 ...
    
			
    2. 
						
  2. 模仿 AppStore 顶部动画
			
    App Store 顶部动画 App Store 中 Games.Apps.Updates 的顶部动画的特点: 自然状态下是大标题,右边有一个 button 顶上去时,变成小标题,右边按钮消失 导航栏 ...
    
			
    3. 
						
  3. h5移动端聊天室|仿微信界面聊天室|h5多人聊天室
			
    今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...
    
			
    4. 
						
  4. Java8-Guava实战示例
			
      示例一: 跟示例三对比一下,尽量用示例三 List<InvoiceQueryBean> invoiceQueryBeanList = new ArrayList<>();  ...
    
			
    5. 
						
  5. [转]asp.net core中的View Component
			
    解读ASP.NET 5 & MVC6系列(14):View Component http://www.cnblogs.com/TomXu/p/4496486.html
    
			
    6. 
						
  6. WINDOWS 下 修改APACHE 并发数
			
    某次,配置大型站点.日IP过2W. 刚解析完,就特别卡,每个页面都是慢吞吞的打开的. 至少30秒.但是,3389进入服务器很快,CPU 内存都是几乎为0. 想到WINDOWS下使用的是APACHE,并 ...
    
			
    7. 
						
  7. 命令行创建Android应用，命令行生成签名文件，命令行查看签名信息，对APK包签名并编译运行
			
    一.命令行创建Android应用 android create project -n HelloWorld -t android-22 -p HelloWorld1 -k org.crazyit.he ...
    
			
    8. 
						
  8. mongodb3.4.15集群搭建
			
    机器:ubuntu 2台 ip: 192.168.0.131 host1 192.168.0.132 host2 安装mongodb sudo apt-key adv --keyserver hkp: ...
    
			
    9. 
						
  9. Spring4.x所有Maven依赖
			
    Spring4.x所有Maven依赖 定义Spring版本号 1 <properties> 2 <org.springframework.version>4.3.7.RELEA ...
    
			
    10. 
						
  10. Mongodb添加副本及修改优先级
			
    Mongodb添加副本及修改优先级 1.添加副本集 #在primary节点上执行 >rs.add( { host: "192.168.1.11:27017", priorit ...
    
			
    11.