限制select显示条数：div完全模拟select

最新推荐文章于 2020-05-30 16:13:39 发布

白小宇

最新推荐文章于 2020-05-30 16:13:39 发布

阅读量3.6k

点赞数 2

分类专栏： web前端 jQuery 文章标签： select jQuery div完全模拟select 限制select显示条数

本文链接：https://blog.csdn.net/b954960630/article/details/53221001

版权

web前端同时被 2 个专栏收录

121 篇文章 4 订阅

订阅专栏

jQuery

10 篇文章 0 订阅

订阅专栏

在做项目时我们有时会碰上这样的问题，如何限制select的选择条数，如果光凭借JS,JQ恐怕无法解决该问题

现在我们提供一种解决方法：

用div完全模拟select ( 即用<div>配上CSS和jQuery，来打造出一个仿真的<select> )，来达到控制条数的效果。

注：如果你想让其select样式变的更漂亮，也要用到 div完全模拟select。

样式如图：例如选择English

（1）（2）（3）

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<style>
/*div完全模拟select*/
.select-ipt {
	color:#000;
	background: #FFF5E6;
	cursor:pointer;
	width:135px;
	height: 17px;
	margin-top:1.5%;
	margin-left: 31px;
	line-height:17px;
	font-size:12px;
	border: 1px solid #000;
        border-radius: 2px; 
}
.selt{
	width: 98%;
	padding-left: 3px;
}
/*CSS小三角*/
span.triangle-down {
    display: inline-block;
    width: 0;
    height: 0;
    float: right;
    position: relative;
    right:5px;
    top:6px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
}
span.triangle-down:hover{
	border-top: 6px solid #002E59;
}
.select-list {
	border: 1px #ccc solid;
	width:132px;	
	max-height: 130px;
	overflow-y:auto;
	margin-left:0px;
	position:relative;
	left: 32px;
	z-index:10000;
	background:#fff;
	border-radius: 0 0 3px 3px;
}
.select-list span{
	cursor:pointer;
	display:block;
	width:98%;
	height:17px;
	line-height:17px;
	padding:0;
	font-size:12px;
	margin-top: 3px;
	padding-left:3px;
}
.select-list span:hover{
	background:#f6615b;
	color:#fff
}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		/*div完全模拟select*/
		$(".select-ipt").toggle(function(){ 
        	$('.select-list').show(); 
    	},function(){ 
       		$('.select-list').hide();
    	});

	   $(".option").click(function() {
			$(".selt").html(this.innerHTML);
			$(".select-list").hide();
		});
	   $("div:not(.select-ipt)").click(function() {
			$(".select-list").hide();
		});
	});	
</script>

</head>
<body>
	<div id="select-box">
	    <div class="select-ipt">
	    	<span class="selt">Select Experiment</span>
	    	<span class="triangle-down"></span><!-- CSS小三角 -->
	    </div>
	    <div style="display: none " class="select-list"><!--下拉框-->
	    	<span class="option" id="0">Select Experiment</span>
            <span class="option" >Chinese</span>
            <span class="option" >English</span>
            <span class="option" >Match</span>
            <span class="option" >JAY</span>
            <span class="option" >VAE</span>
	    </div>
	</div>
</body>
</html>

白小宇

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
限制select显示条数：div完全模拟select

在做项目时我们有时会碰上这样的问题，如何限制select的选择条数，如果光凭借JS,JQ恐怕无法解决该问题现在我们提供一种解决方法：用div完全模拟select ( 即用<div>配上CSS和jQuery，来打造出一个仿真的<select> )，来达到控制条数的效果。注：如果你想让其select样式变的更漂亮，也要用到 div完全模拟select。
复制链接

扫一扫

专栏目录